Question

想知道是否有 css-only 方式来执行切换输入焦点上相应标签上的样式。到目前为止，我有：

    $(document).on('focus active', 'input',function(){
        $('label[for='+$(this).attr('id')+']').addClass('active');
    });
    $(document).on('blur', 'input',function(){
        $('label[for='+$(this).attr('id')+']').removeClass('active');
    });

HTML：

    <div class="row">
     <label for="contact_form_mail">Email</label>
     <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    </div>

和CSS：

.active{ color:red; }

编辑：我肯定知道孩子和兄弟选择器“变通办法”，但重新排列干净标记只是为了造型的样子似乎不对，所以如果有另一种纯粹的CSS方式这个答案胜！

http://jsfiddle.net/fchWj/3/

Answer 1

尝试这种方式： - 输入后放置标签并向左浮动。并申请兄弟姐妹。

HTML

<div class="row">
    <input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
    <label for="contact_form_mail">Email</label>
</div>

CSS

label {
    float:left;
}
input:focus + label {
    color:red;
}

Demo

这是一个让相邻兄弟选择器工作的黑客，因为它仅适用于以下元素而不是前一个元素。 ~将在此元素后选择所有相邻的兄弟姐妹。因此，如果您对每个输入部分使用不同的.row，请使用+。

Answer 2

如果你愿意切换元素，那就去吧

Demo

<div>
    <input type="text" />
    <label for="e_mail">E-Mail</label>
</div>

label {
    float: left;
    margin-right: 5px;
}

input[type=text]:focus + label {
    color: red;
}

说明：我们在此处使用+邻近选择器，因此在对焦文本框时，我们会选择label标记并应用颜色red

注意：不要忘记清除浮子;）

Answer 3

仅使用CSS，无需切换标签和输入的顺序。您可以在父元素上使用:focus-within CSS伪类，该元素适用于具有焦点的子元素的元素。

在您的示例中，您可以使用以下内容：

.row:focus-within label {
    color: red;
}

请注意，此伪类相对较新，因此只有现代浏览器才支持它。

Answer 4

有，但只有在输入后放置标签。

<input name="field" type="text" />
<label for="field">Label Here</label>

input:focus + label{
    color: red;
}

现在，如果您希望将标签放在它之前，那么您需要使用绝对位置执行一些css样式以将标签放在输入字段之前，然后在输入上添加一些边距以将其移动到右侧。

<div>
    <input name="field" type="text" />
    <label for="field">Label Here</label>
</div>

div{
   position: relative;
}
input{
   margin-left: 40px;
}
label{
   position:absolute;
   left:0;
}

Answer 5

首先，我们可以使用一个匹配标签的选择器，后面跟着输入标签（ input：focus + label ）。但仍然存在问题，标签在实际输入字段之后。如果想让它高于文本输入，我们需要切换控件的位置。这可以使用CSS伪表来完成。

<div class="pseudo-table">
   <input id="yourname" name="yourname" type="text" placeholder="Name...">
   <label for="yourname">Name</label>
</div>

人工桌的风格是......

.pseudo-table { display: table;  }

有了这个，我们可以转换标签，例如到 table-header-group ：

label { display: table-header-group; }

和 table-row-group 的输入字段：

input { display: table-row-group; }

结合我们后面的选择器，我们已经完成了它看起来是正确的：

input:focus + label {
    color:red;
    font-weight: bold;
}

有关演示，请参阅此Fiddle

HTH

Answer 6

没有选择器匹配前面的元素...... 这匹配紧跟在输入标记之后的标签。

input:focus + label {
    color: red;
}

Answer 7

这会在输入上方为您提供标签，在输入焦点时突出显示标签。
HTML

<div class="row">
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
<label for="contact_form_mail">Email</label>
</div>

<code>
.row{
    display:flex;
    flex-direction:column-reverse;
    align-self:flex-start;
 }
 .row input:focus{
     border: 1px solid red;
  }
  .row input:focus+label{
     color:red;
  }
  </code>

仅使用css在输入字段上切换标签上的样式（活动/焦点）

7 个答案:

HTML

CSS

Demo