无论如何都要让标签响应：focus CSS

Question

有没有办法让标签响应焦点。我有一些代码，其中文本字段的焦点具有不同的样式。然而，该标签也需要稍微不同的风格。我尝试了这个，但它没有影响标签。

#header .search label {
    background:url(http://www.golfbrowser.com/images/icons/search.png) left top no-repeat;
    padding-left:20px;
    height:20px;
    float:right;
}
#header .search label:focus {
    background:url(http://www.golfbrowser.com/images/icons/search-z.png) left top no-repeat;
    padding-left:20px;
    height:20px;
    float:right;
}
#header .search input {
    padding:0px;
    border:0px;
    width:140px;
    height:20px;
    float:left;
    padding-right:10px;
    background:url(http://www.golfbrowser.com/images/icons/searchbar.png) right top no-repeat;
}
#header .search input:focus {
    padding:0px;
    width:190px;
    height:20px;
    float:left;
    padding-right:10px;
    background:url(http://www.golfbrowser.com/images/icons/searchbar-z.png) right top no-repeat;
}

标签包含图像和圆角的其他部分，它也必须改变颜色才能使字段看起来正确。

任何想法，

太棒了

Answer 1

您实际上无法将焦点放在标签上。它不是可聚焦的表单元素。此外，即使您可以这样做，那么之前拥有焦点的任何内容（这意味着您的输入）无论如何都会将其丢失给标签。

您可能需要重构您的 HTML（并相应地修改您的 CSS），以便您可以选择

input:focus

，然后选择 该输入的相应标签。例如，如果您在输入后移动了标签并为标签使用了以下 CSS 选择器，您应该能够实现您想要的目标。

#header .search input:focus + label

Answer 2

BoltClock 的答案是实现此功能的更语义化、轻量级的方式。然而，并不总是可能有特定的 HTML 结构（特别是为了促进像这样的小功能），并且 CSS 缺乏遍历 HTML 层次结构的能力。为了解决这个问题，这里有两种选择。第一个即将推出（CSS 规范 4），第二个是我们的老伙伴 Javascript。

首先，CSS4 的

:focus-within

伪选择器。这正如它在锡上所说的那样（范围基于任何子元素的活动焦点状态）。请阅读此处了解有关规格的更多信息。假设您的 HTML 结构为：

<div class="input-wrapper">
    <label for="elem">Label Text
      <input name="elem" id="elem" type="text" />
    </label>
</div>

您可以简单地通过以下方式确定“重点”标签的范围：

label:focus-within{}

同样的道理，你也可以使用以下方法来确定父 div 的范围：

div.input-wrapper:focus-within{}

神奇。但今天不能用:(

其次，如果您已经在使用 JS 选择器引擎（即 jQuery、Sizzle 等），您还可以执行以下操作：

$('input').on("focus", function(){
  var input = $(this);
  // assuming label is the parent, i.e. <label><input /></label>
  var label = $(this).parent();
  label.addClass('focussed');
  input.on("blur", function(){
    label.removeClass('focussed');
    input.off("blur");
  });
});

这是未经测试的，但其实现的本质是使用类而不是

:focus

伪选择器。因此您可以将您的重点样式添加到

label.focussed{}

。我添加（并自行删除）模糊处理程序以方便删除该类。

Answer 3

现在使用 Flex box 可以解决这个问题。让 label 元素位于 HTML 中的 input 元素之后。然后使用

flex-direction: column-reverse

更改其位置以显示在输入元素上方。然后，您可以使用

input:focus + label: {}

来定位标签。

.input-container {
  display: flex;
  flex-direction: column-reverse;
}

  .input-container > input {
  /* your input styles */
}

 .input-container > input:focus + label {
  /* targets the label when the input receives focus */
  color: red;
 }

<div class="input-container">
  <input type='email' />
  <label>Email</label>
</div>

Answer 4

use:checked instead of :focus and you must give id,name,value into 'input'.

Answer 5

找到了一个很好的解决方案 -

order

属性做了一个把戏：

input:focus {
        background-color: #F2FFF0;
    }
    
    * {
        font-family: "Arial";
        font-size: 13px;
    }
    
    div.settings {
        display:grid;
        grid-template-columns: max-content max-content;
        grid-gap: 7px
    }
    div.settings label {
        text-align:right;
        padding-top: 3px
    }
    
    div.settings label:after {
        content: ":";
    }
    
    div.settings input:focus  + label:before  {
        content: "\25B6  ";
        font-size: 12px;
        color: red;
    }
    
    input {
        border: 1px solid #ccc;
        padding: 2px 4px;
        font-size: 13px;
    }

<div class="settings">
<input style="order:2" type="text" title="(vardas, pavardė ir pan.)" autocomplete="off" id="name" name="name" required minlength="4" maxlength="128" size="50"><label style="order:1" for="name">Pirkėjas</label>
<input style="order:4" type="text" title="" autocomplete="off" id="company" name="company" required minlength="4" maxlength="128"><label style="order:3" for="company">Įmonės pavadinimas</label>
<input style="order:6" type="text" title="" autocomplete="off" id="companyCode" name="companyCode" required minlength="4" maxlength="128"><label style="order:5; min-width: 160px" for="companyCode">Įmonės (asmens) kodas</label>
</div>

Answer 6

我想我对此有一个更简单的答案，那就是添加

tabindex="0"

。