CSS3 color transition from transparent does not work for a textbox, how to solve?
I posted the following on some chrome help forum with no luck, but the same problem exists for the -moz version of the CSS3 rules.
I'm using Chrome 12.0.742.122 on Windows XP SP3. I want to use CSS3 to transistion text in a text box from transparent to a color (red). Starting with a CSS rule for text in a span and textbox with no color style (i.e. default black) works for both. Starting with a transparent color style (or any color), works for span only but not text box, even though the rules are complete analogous. The following excerpt show the problem. After clicking on the button, the first two text examples starting with default colors, one in a span and one in a textbox, both turn to red as expected. For second two text examples, again one in a span and one in a textbox, only the span text turns red and the textbox text remains transparent.
How can I get the textbox color to transition from transparent to red?
Example code showing problem:
<!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="myt开发者_Python百科ext2" 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>
The .newcolor selector is not specific enough to override the transparent declaration. If you take out the CSS transitions, you still have the same problem.
A quick solution would be:
.newcolor {
color: red !important;
}
See http://jsfiddle.net/DFrgK/
use all instead.
transition: all 2s ease-in;
加载中,请稍侯......
精彩评论