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

不幸的是，在集中span时，使用纯css无法更改input样式。使用: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>

专注于表单输入时的样式跨度

3 个答案: