无论如何，要有一个标签响应: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 spec 4），第二个是我们的老伙伴Javascript。

首先，CSS4 的:focus-within伪选择器。这完全符合它在 tin 上所说的（范围基于任何子元素的活动焦点状态）。在此处阅读有关规范的更多信息。因此，假设您的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 可以解决这个问题。让标签元素跟随 HTML 中的输入元素。然后使用 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>