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

Question

我正在尝试设置输入字段之前的所有标签的样式，复选框和单选按钮除外。

使用〜选择器我已经得到了除“文本”输入标签之外的所有工作 - 我尝试的每种其他类型都将应用该样式，但文本没有，我已经盯着它看了太久。< / p>

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＆amp;铬。

Answer 1

如果你正在寻找一个“前面的”CSS选择器，据我所知，没有一个。

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

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

1. 样式所有标签
2. 覆盖复选框/无线电
后面的标签

像这样：

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

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

强制性fiddle。

Answer 2

您可以在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 3

您的代码正常运行 附加到文本输入的标签不会被定位，因为没有输入标记作为前一个元素

您正在使用此代码：

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

<强>表示：

定位所有以输入AND THIS INPUT等为前缀的标签 由于文本标签前没有输入，因此不会被定位

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

Answer 4

如果您可以为每个id的{​​{1}}属性更改命名约定，例如：

• 输入type =“ text”：input
• 输入type =“ checkbox”：txtSomething
• 输入type =“ radio”：chkSomething等

然后您的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

有关CSS Attribute Selectors here的更多信息。