你能否只用CSS样式化一个活动表单输入的标签？

Question

给定以下html：

<label for="inputelement">label</label>
<input type="text" id="inputelement" name="inputelement" />

可以使用以下代码来为聚焦时的输入框添加样式：

:focus伪类

input:focus { background: green; }

有没有一种不使用JavaScript也能为添加样式的方法？

谢谢大家。

- Dave Taylor

---

你可以给标签一个id或class，并在CSS中进行定位。或者你是在问是否可以在不改变标记和添加id或class的情况下对其进行样式设置？ - user356808

如果你针对支持flexbox的浏览器进行开发，那么这是可以实现的 - 请参见下面的新答案。 - yar1

Answer 1

不，CSS中没有前任选择器。

input:focus -+ label { ... }

把标签放在输入框后面是可行的，这样会更好。

input:focus + label { ... }

你可以使用一些定位来显示在...

- Ian Wood

---

谢谢，我想这可能是情况。这会非常好。不幸的是，我不能更改标记 :o( 不过我会记住这个建议以备将来之需。 - Dave Taylor

如果你针对支持flexbox的浏览器进行开发，那么这是可以实现的 - 请参见下面的新答案。 - yar1

Answer 2

为了完整性，如果您的输入字段在标签内部，您可以使用:focus-within：

HTML：

<label>
   <input name="example" type="text">
</label>

CSS：

label:focus-within {
   background: #DEF;
}

- Avatar

---

只是提供信息，IE不支持它 https://caniuse.com/#feat=css-focus-within - LazioTibijczyk

这应该是被选中的答案，简单而且完美地运作。 - alexbooots

@alexbooots 不应该这样。不推荐使用隐式标签。你可以阅读这篇小文章。 - maiakd

Answer 3

更新

请确保您检查草案，因为可能会有更改：https://drafts.csswg.org/selectors-4/#relational

:has()关系伪类将允许选择父元素，例如下面的选择器只匹配包含一个 <img> 子元素的 <a> 元素：

a:has(> img)

这可以与其他选择器（例如:focus，:active或:not）组合使用，提供了许多潜在的可能性。

不幸的是，在撰写本文时，浏览器的支持情况并不好：https://caniuse.com/#feat=css-has

为那些将来在这个页面中查找此信息的人添加：CSS4将具有父选择器，允许您选择要应用样式的元素：

我认为当前规范允许您使用!符号指定匹配哪个项目-主题选择器。

label! > input {
  font-weight: bold;
}

这比仅使用parent提供了更大的控制能力，例如在下面这个可怕的链中，p标签是目标！

article > h1 + section > p! > b > a {
  font-style: italic;
}

- Ric

---

到2013年为止还没有支持，但最终这可能会成为正确的做法。^ THIS. - Jordan Gray

看起来它已经从草稿中消失了。根据当前的草稿，解决方案将使用:has选择器。而不是“! >b > a”，它将是“:has(>b>a)” - JotaBe

@Blauhirn，我已经更新了我的答案，以反映自首次撰写以来规范的更改。 - Ric

2021年了，我们仍在处理它。 - s0rfi949

幸运的是，最近在Chromium项目中实现它似乎至少有一些活动 https://bugs.chromium.org/p/chromium/issues/detail?id=669058 - Stephen Watkins

Answer 4

您可以使用属性选择器：

label[for=inputelement]:focus,
label[for=inputelement]:active {
    /*styles here*/
}

请注意，这不被IE6支持，但应该在所有其他浏览器中工作，包括IE7和IE8。

这显然只适用于特定的ID。如果您希望它适用于所有 ID，请省略ID：

label[for]:focus,
label[for]:active {
    /*styles here*/
}

现在，所有带有 for 属性的标签都可以正常工作。

如果需要介于两者之间的内容，则需要使用类。

- Spudley

---

但这不会响应 :focus 或 :active 伪状态。 - David Thomas

很遗憾，它不能仅限于特定的id/名称等，它需要适用于任何id/名称等。 - Dave Taylor

@David Thomas - 好的，那把:focus和:active加到选择器里吧……我会在我的回答中编辑它。 - Spudley

@Dave Taylor - 你可以指定一个带或不带值的属性选择器；我不确定你需要什么。我会编辑我的答案，包含这个信息。 - Spudley

这段代码仍仅针对标签进行操作，与其关联的输入是否获得焦点无关。 - Fivebears

@Spudley - 非常渴望能够看到使用原始问题发布者标记的HTML的工作演示。 - Fivebears

Answer 5

只要在标记中input后面跟着label，就可以实现。

input:focus + label,
input:active + label {
    /* style */
}

- David Thomas

Answer 6

这个想法是将输入、标签、帮助、错误等内容包装在 Flexbox 容器中。 然后使用 + 选择器来选择标签元素。
注意：仅当 <label> 在 <input> 之后时才会起作用。
然后使用 flexitem 的 order 属性定义 <label> 的顺序。
当然，您也可以使用类名。

.container {
    display: flex;
    flex-direction: column;
}
input {
    border: none;
}
label {
    order: -1;
}
input:focus {
    border: 1px solid red;
}
input:focus + label{
    color: red;
}

<div class="container">
    <input id="username" />
    <label for="username">Username</label>
</div>

- Orel Hassid

Answer 7

当然可以。

您需要：

• 将标签和表单都分组到父元素中（例如一个div）
• 使用父级的聚焦伪选择器选择器为标签添加样式，如 .parent:focus label { color: green }

您可以在我创建的jsfiddle上查看一个非常简单的示例。

<div class='workarea'>
    <div class='hasinput'>
        <label>Label 1 (should be green when active)</label>
        <input />
    </div>
    <div class='hasinput'>
        <label>Label 2 (should be green when active)</label>
        <input />
    </div>
</div>

.workarea {
    max-width: 500px;
}

label,
input {
    width: 100%;
}

.hasinput {
    margin-bottom: 1rem;
}

.hasinput label {
    color: blue;
}

.hasinput:focus-within label {
    color: green;
}

- therealbene

---

很好，我之前还没有接触过 :focus-within。而且它也得到了很好的支持：https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within - Adam Marsh

Answer 8

为您的输入按钮添加一个样式类

CSS 样式：

INPUT.book:hover, INPUT.book:focus:hover {
    background-image:url(book_over.png);
    background-repeat:no-repeat;
    height: 40px;
    width: 140px;
    font-family:calibri, Tahoma;
    font-size:20px;
    color:#ffffff;
    text-align: center;
    font-weight: bold;
}

INPUT.book {
    background-image:url(book_active.png);
    background-repeat:no-repeat;
    height: 40px;
    width: 140px;
    font-family:calibri, Tahoma;
    font-size:20px;
    color:#ffffff;
    text-align: center;
    font-weight: bold;
}

以及输入的HTML：

<input name="Bestil2" type="submit" class="book"  value="Book møde" />

我还没有弄清楚如何避免灰色背景，即使我有一个透明的png文件，也许只需要一个jpg文件就可以了。但我希望这可以帮到你。 祝你好运 :-)

- Jeannine

Answer 9

这里是使用CSS网格布局的另一种选择：

有人建议如果标签在输入框之后，那么可以使用flexbox或者在我的情况下使用CSS网格布局来先放置标签。

body {
  font-family: Arial;
}

.form-field {
  display: grid;
  gap: 4px;
}

.form-field label {
  grid-row: 1;
  font-size: 12px;
  color: #737373;
}

.form-field input {
  outline: unset;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  border: 1px solid #737373;
}

.form-field input:focus {
  border-color: #328dd2;
}

.form-field input:focus + label {
  color: #328dd2;
}

<div class="form-field">
  <input id="myinput" />
  <label for="myinput">
    My Input
  </label>
</div>

- Gustavo Santamaría

Answer 10

如果你的目标浏览器支持flexbox，那么这是可以实现的 - 参见此链接：http://plnkr.co/edit/g376cf38iphfvGfSubOz?p=preview

为了简洁起见，CSS代码很少，但你需要一些特定于浏览器的前缀来扩展对较旧浏览器的支持。

- yar1

---

我不明白flexbox会有什么区别。代码没问题，但是即使没有display: flex，焦点样式也能正常工作。 - Kamafeather

@Kamafeather：这里有一个更详细的解释：该解决方案使用了相邻兄弟选择器（+），意味着在HTML中<label>必须在<input>之后出现。Flexbox用于修改HTML元素的呈现顺序。 - yar1

请使用代码片段，您所写的链接已经失效了。 - NetVicious

现在它可以工作了，前几天不行。请更改回答，包括您的代码片段，因为 plnkr 可能会删除您的代码或消失；Stackoverflow 上的代码片段将一直存在。 - NetVicious

由于答案在链接后面被隐藏，我必须避免点赞。 - tim-phillips