14

想知道是否有一种仅使用 CSS 的方式来执行切换输入焦点上相应标签上的样式。到目前为止，我有：

    $(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/

4

7 回答 7

19

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

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;
}

演示

这是一种让相邻兄弟选择器工作的技巧，因为它仅适用于后面的元素而不是前面的元素。~将选择此元素之后的所有相邻兄弟。因此，如果您.row对输入的每个部分都有不同的内容，请使用+.

于 2013-05-31T14:25:37.657 回答
15

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

演示

<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

注意：不要忘记清除浮动；）

于 2013-05-31T14:25:29.427 回答
7

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

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

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

请注意，这个伪类相对较新，所以只有现代浏览器支持它。

于 2018-02-17T09:26:37.420 回答
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;
}
于 2013-05-31T14:27:21.207 回答
3

这为您在输入顶部提供标签，在输入焦点时突出显示标签。
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>
于 2018-08-08T12:09:53.540 回答
2

首先，我们可以使用一个匹配标签的选择器，该标签紧跟输入标签（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

高温高压

于 2014-02-07T16:36:44.813 回答
1

没有选择器来匹配前面的元素...这匹配紧随其后的输入标签的标签。

input:focus + label {
    color: red;
}
于 2013-05-31T14:24:00.247 回答