样式化附加到文本输入的标签

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。

Answer 1

您可以在 HTML 中交换 input 和 label，这样您就可以使用 + 来应用样式，这意味着“紧随其后”。要在视觉上交换它们，您可以使用float。像这样的：

HTML

<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;
}

小提琴http://jsfiddle.net/G3FED/3/

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

Answer 2

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

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

现在，如果您想为表单中的所有标签设置样式，除了跟随其他一些元素（例如复选框）的标签，也许这种方法对您有用：

1. 为所有标签设置样式
2. 覆盖复选框/单选框后面的标签

像这样：

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

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

还有必填的fiddle。

Answer 3

您的代码正在正常工作 您附加到文本输入的标签不是目标，因为没有输入标签作为前置元素

您正在使用的代码：

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

说：

以输入和此输入等前面的所有标签为目标 由于文本标签之前没有输入，因此不会被定位

注意：我想你的目标是标签。,,,,,

Answer 4

如果您可以更改每个input 的id 属性的命名约定，例如：

• 输入类型=“文本”：txtSomething
• 输入类型=“复选框”：chkSomething
• input type="radio": optSomething 等

那么你的label就会变成：

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

因此，您可以像这样将Regular Expression 用于您的CSS Selector，而无需将label 与input 和float 交换：

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

更多关于CSS Attribute Selectors here。

Answer 5

基本 Material Design 类型标签的解决方案，其中占位符被标签替换。

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;
}   

您可以添加属性“类型”选择器来排除输入类型。 IE：复选框或收音机

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