CSS3颜色转换从透明不适用于文本框，如何解决？
我在某个chrome帮助论坛上发布了以下内容，但同样的问题也存在于CSS3规则的-moz版本中 我在WindowsXPSP3上使用Chrome12.0.742.122。我想使用CSS3将文本框中的文本从透明转换为颜色（红色）。从span和textbox中的文本的CSS规则开始，没有颜色样式（即默认黑色）的文本都适用。从透明颜色样式（或任何颜色）开始，仅适用于范围，而不适用于文本框，即使规则完全类似。下面的摘录显示了这个问题。单击按钮后，以默认颜色开头的前两个文本示例（一个在范围中，一个在文本框中）都会按预期变为红色。对于后两个文本示例，一个在span中，另一个在textbox中，只有span文本变为红色，textbox文本保持透明 如何使文本框颜色从透明过渡到红色 显示问题的示例代码：CSS3颜色转换从透明不适用于文本框，如何解决？,css,Css,我在某个chrome帮助论坛上发布了以下内容，但同样的问题也存在于CSS3规则的-moz版本中 我在WindowsXPSP3上使用Chrome12.0.742.122。我想使用CSS3将文本框中的文本从透明转换为颜色（红色）。从span和textbox中的文本的CSS规则开始，没有颜色样式（即默认黑色）的文本都适用。从透明颜色样式（或任何颜色）开始，仅适用于范围，而不适用于文本框，即使规则完全类似。下面的摘录显示了这个问题。单击按钮后，以默认颜色开头的前两个文本示例（一个在范围中，一个在文本框中
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Change Color Test</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<style type="text/css">
.myclass1 {
-webkit-transition: color 2s ease-in;
}
span#mytext1 input[type=text] {
-webkit-transition: color 2s ease-in;
}
.myclass2 {
color: transparent;
-webkit-transition: color 2s ease-in;
}
span#mytext2 input[type=text] {
color: transparent;
-webkit-transition: color 2s ease-in;
}
.newcolor {
color: red;
}
</style>
<script type="text/javascript">
$(function() {
$('#mybutton').click(function() {
$('.myclass1').addClass('newcolor');
$('span#mytext1 input[type=text]').addClass('newcolor');
$('.myclass2').addClass('newcolor');
$('span#mytext2 input[type=text]').addClass('newcolor');
});
});
</script>
</head>
<body>
<span id="mytext1" class="myclass1">
Hello world from span 1!<br />
<input type="text" value="Hello again from text box 1!" />
</span>
<br />
<span id="mytext2" class="myclass2">
Hello world from span 2!<br />
<input type="text" value="Hello again from text box 2!" />
</span>
<br />
<input id="mybutton" type="button" value="click me to change color" />
</body>
</html>
变色试验
.myclass1{
-webkit过渡：颜色2易用；
}
span#mytext1输入[类型=文本]{
-webkit过渡：颜色2易用；
}
.myclass2{
颜色：透明；
-webkit过渡：颜色2易用；
}
span#mytext2输入[类型=文本]{
颜色：透明；
-webkit过渡：颜色2易用；
}
.新颜色{
颜色：红色；
}
$（函数（）{
$（“#mybutton”）。单击（函数（）{
$（'.myclass1'）.addClass（'newcolor'）；
$（'span#mytext1 input[type=text]'）。addClass（'newcolor'）；
$（'.myclass2'）.addClass（'newcolor'）；
$（'span#mytext2 input[type=text]'）。addClass（'newcolor'）；
});
});
你好，来自span 1的世界
你好，来自span 2的世界
transition: all 2s ease-in;
.newcolor选择器不够具体，无法覆盖透明声明。如果去掉CSS转换，仍然存在同样的问题 一个快速的解决办法是：
.newcolor {
color: red !important;
}
请参见顺便说一句：我成功地将原始颜色（透明）从带有过渡的规则中删除，并将其放入名为oldcolor的单独规则中。然后在jquery对象上执行.removeClass（'oldcolor'）.addClass（'newcolor'）。然而，我确实认为span和textbox的行为应该是相同的，事实并非如此（有人知道为什么吗？）。