Question

给出以下html

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

您可以使用

设置焦点上的输入样式

input:focus { background: green; }

有没有一种方法可以在没有JavaScript的情况下设置<label />样式？

全部谢谢

Answer 1

没有。遗憾的是，在css

中没有前导选择器

input:focus -+ label { ... }

会很可爱。

输入后的标签是可行的：

input:focus + label { ... }

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

Answer 2

您可以使用属性选择器：

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属性的所有标签。

如果你需要介于两者之间，你需要使用类。

Answer 3

<强>已更新

请务必检查草稿，因为这可能会发生变化：https://drafts.csswg.org/selectors-4/#relational

：has（）关系伪类将允许选择父类，例如，以下选择器仅匹配包含<a>子元素的<img>元素：

a:has(> img)

这可以与其他选择器结合使用，例如:focus，:active或:not，以提供很多潜力。

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

<击> 为在将来中查找此页面的用户添加此项。 CSS4将有一个父选择器，允许您选择将样式应用于哪个元素：

我认为当前的规范允许您指定哪个项目与之匹配！ sign - 主题选择器。

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

这允许远比父母更大的控制，例如在p标签下方的这个可怕链中是目标！

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

<击>

Answer 4

您可以，只要label跟随标记中的input：

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

Answer 5

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

.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>

Answer 6

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

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会做。但我希望这会有所帮助。祝你好运： - ）

Answer 7

如果你定位支持flexbox的浏览器，可以这样做 - 请参阅：http://plnkr.co/edit/g376cf38iphfvGfSubOz?p=preview

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

Answer 8

为完整起见，如果您输入的字段是标签内，则可以使用focus-within：

HTML：

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

CSS：

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

你可以用CSS来设置活动表单输入标签的样式

8 个答案: