Я опубликовал следующее на каком-то справочном форуме chrome, но безуспешно, но такая же проблема существует для версии -3z правил CSS3.
Я использую Chrome 12.0.742.122 в Windows XP SP3. Я хочу использовать CSS3 для перехода текста в текстовом поле с прозрачного на цвет (красный). Начиная с правила 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>