從透明CSS3顏色過渡不適用於文本框，如何解決？

我在一些chrome幫助論壇上發佈了以下內容，但沒有運氣，但同樣的問題存在於-moz版本的CSS3規則中。從透明CSS3顏色過渡不適用於文本框，如何解決？

我在Windows XP SP3上使用Chrome 12.0.742.122。我想使用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>

來源

2011-07-21 harrije

BTW：我得到它的工作可以去除與過渡規則原來的顏色（透明），並把它在所謂的分離規則oldcolor。然後在我的jquery對象上做.removeClass（'oldcolor'）。addClass（'newcolor'）。但是，我認爲行爲應該是相同的跨度和文本框，而不是這種情況（有誰知道爲什麼？）。 – harrije

使用所有代替。

transition: all 2s ease-in;

來源

2011-07-22 23:00:46

.newcolor選擇器不足以覆蓋透明聲明。如果你拿出CSS轉換，你仍然有同樣的問題。

一個快速的解決辦法是：

.newcolor { 
    color: red !important; 
}

見http://jsfiddle.net/DFrgK/

來源

2011-07-23 16:05:13 Duopixel

從透明CSS3顏色過渡不適用於文本框，如何解決？

回答

相關問題