为文本输入框添加标签样式

Question

我正在尝试为所有在输入字段之前的标签进行样式设置，但不包括复选框和单选按钮。

使用 ~ 选择器，我已经让所有其他类型生效了，但是“文本”输入标签并没有生效，并且我已经盯着它看了很久。

HTML

<form>
  <label for="MyText">Text Field</label>
  <input id="MyText" type="text" /><br />

  <label for="MyUrl">Url Field</label>
  <input id="MyUrl" type="url" /><br />

  <label for="MyCheck">Checkbox</label>
  <input id="MyCheck" type="checkbox" /><br />
</form>

CSS

INPUT:not([type="radio"]):not([type="checkbox"]) ~ LABEL {
  width: 100px;
}

INPUT:not([type="radio"]):not([type="checkbox"]) {
  width: 200px;
}

LABEL { display: inline-block; }

我希望避免使用ID或类来指定文本输入标签，以保持代码的整洁。这是我的JSFiddle链接：http://jsfiddle.net/buzzsurfr/GWk96/1/。此截图来自JSFiddle，我已在FF和Chrome中测试过。

- Theo

---

你的两个选择器似乎都工作正常。 - Yana

我在JSFiddle中添加了一张图片，"文本字段"标签在IE、FF和Chrome中与第一个CSS赋值不匹配。 - Theo

问题在于 ~ 组合器不会选择前面的元素。 - Yana

为什么不直接选择“标签”？ - Blender

即使您的小提琴本身无法实现您所希望实现的功能。复选框的标签已经被设计好了样式。您的CSS代码将为所有松散跟随不是复选框或单选按钮的输入的标签添加样式。假设您可以控制HTML，请添加一些类并完成它。 - DannyB

Answer 1

如果您正在寻找“前置”CSS选择器，据我所知是没有的。

因此，最好的选择是假设您对HTML具有控制权，而不仅仅是CSS，将类添加到要样式化的标签中。这将是最简单、最干净和跨浏览器的解决方案。

现在，如果您想样式化表单中的所有标签，除了紧随其他元素（例如复选框）之后的标签，也许这种方法适合您：

1. 样式化所有标签 2. 覆盖跟随复选框/单选按钮的标签

像这样：

label {
    width: 100px;
    background:#ccc;
}

input[type="checkbox"] + label {
    background:#eee;
    display:inline;
}

还有必须的演示代码。

- DannyB

---

这个代码片段看起来和我的一模一样，你能帮忙确认一下吗？ - Theo

不知道那个小提琴发生了什么事。我已经更新了链接。 - DannyB

Answer 2

您可以在HTML中交换input和label，这将允许您使用+表示“紧接着”，以便应用样式。要在视觉上交换它们，您可以使用float。类似于以下内容：

<form>
    <input id="MyText" type="text" />
    <label for="MyText">Text Field</label>
    <br />
    <input id="MyUrl" type="url" />
    <label for="MyUrl">Url Field</label>
    <br />
    <input id="MyCheck" type="checkbox" />
    <label for="MyCheck">Checkbox</label>
    <br />
</form>

CSS（层叠样式表）

INPUT:not([type="radio"]):not([type="checkbox"]) + LABEL {
    width: 100px;
}

INPUT:not([type="radio"]):not([type="checkbox"]) {
    width: 200px;
}

LABEL { 
    display: inline-block;
    float: left;
}

BR {
    clear: both;
}

Fiddle http://jsfiddle.net/G3FED/3/

在这里你可以找到更多关于+ CSS选择器的信息 http://www.w3.org/TR/selectors/#adjacent-sibling-combinators

- Vadim

Answer 3

一个基本的材料设计类型标签解决方案，其中占位符被标签替换。

HTML

<div class="input-container">
    <input name="email" type="email" placeholder="Enter Email Address">    
    <label for="email">Email Address</label>
</div>

CSS

.input-container {
  position: relative;
}

.input-container > label {
  opacity: 0;
  position: absolute;
  left: .5em;
  top: -1.2em;
  font-size: smaller;  
  transition: opacity 1s ease-in;
}

.input-container > input:not(:placeholder-shown) + label {
  opacity: 1;
}   

您可以添加属性'type'选择器以排除输入类型。例如：复选框或单选按钮。

input:not(:placeholder-shown):not([type="radio"]):not([type="checkbox"]) + label

- Antony Booth

Answer 4

你的代码正常工作。 由于前面没有输入标签，所以文本输入框上附加的标签没有被选中。

你正在使用的代码：

INPUT:not([type="radio"]):not([type="checkbox"]) ~ LABEL {
  width:300px;
}

说：

目标是所有在输入框之前的标签，只有这样才能匹配到它们。 由于文本标签前面没有输入框，因此无法匹配。

注意：我想你是在针对标签进行操作。

- Fico

Answer 5

如果您可以更改每个输入的ID属性的命名约定，例如：

• 输入类型为文本：txtSomething
• 输入类型为复选框：chkSomething
• 输入类型为单选按钮：optSomething等

然后您的标签将变为：

<form>
  <label for="txtMyText">Text Field</label>
  <input id="txtMyText" type="text" /><br />

  <label for="txtMyUrl">Url Field</label>
  <input id="txtMyUrl" type="url" /><br />

  <label for="chkMyCheck">Checkbox</label>
  <input id="chkMyCheck" type="checkbox" /><br />
</form>

因此，您可以使用正则表达式作为您的CSS选择器，而无需交换您的label与input并float它：

label[for^="txt"] {
    width: 100px;
}

了解更多关于CSS属性选择器的内容，请点击这里。

- Antonio Ooi