專注於表單輸入時的樣式跨度

Question

小問題但是，找不到解決這個小問題的方法。 我有 html 表單

 <div id="todolist">
      <span class="add-on">OK</span>
      <input class="addtodo" placeholder="New todo task" name="TITLE"  type="text" >
 </div>

在 CSS 中

 #post-todo span{   
     color:#aaa;
 }

我想改變color:#333當專注於input ，怎么做？

Answer 1

使用CSS:focus selector ，如下所示。

     input:focus
     {
        background-color:yellow;
        color:blue;
     }

假設您的OK span將放置在input之后，那么下面的代碼將在沒有 jQuery 幫助的情況下工作。 只有CSS才能解決問題。

<div id="todolist">
      <input class="addtodo" placeholder="New todo task" name="TITLE"  type="text" >
      <span class="add-on">OK</span> <!-- span must be after input-->
 </div>

 .addtodo:focus + .add-on
 {
    background-color:yellow;
    color:blue;
 }

CSS 中的+用於匹配緊跟在它之前的同級元素的任何元素。

考慮

E + F
{
    // code
}

然后Matches any F element immediately preceded by a sibling element E.

這是演示http://jsfiddle.net/UxZXN/

Answer 2

不幸的是，當聚焦input時，純 css 不可能改變span樣式。 使用:focus選擇器僅適用於聚焦元素的子元素。

但是有一個相當簡單的 javascript jquery 方法：

$("#post-todo .addtodo").focus(function(){
    $("#post-todo .add-on").css("color", "#333");
})

$("#post-todo .addtodo").blur(function(){
    $("#post-todo .add-on").css("color", "#aaa");
})

見這里： http : //jsfiddle.net/BEeNa/

Answer 3

它終於成為可能，僅僅幾年后......

在:focus-within 的支持下是可能的。

 #todolist:focus-within .add-on { color: #aaa; }

 <div id="todolist"> <span class="add-on">OK</span> <input class="addtodo" placeholder="New todo task" name="TITLE" type="text" > </div>