3

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

使用 ~ 选择器，除了“文本”输入标签之外，我已经完成了所有工作——我尝试的所有其他类型都会应用该样式，但文本不会，而且我已经盯着它太久了。

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。 文本输入标签未与其下方的一个对齐（a

4

5 回答 5

2

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

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

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

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

像这样：

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

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

和强制性的小提琴。

于 2013-05-17T19:30:03.257 回答
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

于 2013-05-17T19:35:26.670 回答
0

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

您正在使用的此代码：

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

说：

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

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

于 2013-05-17T19:15:13.240 回答
0

基本 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
于 2022-02-23T18:09:15.677 回答
0

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

  • 输入类型=“文本”：txtSomething
  • 输入类型=“复选框”：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交换：labelinputfloat

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

更多关于CSS 属性选择器的信息在这里。

于 2020-07-11T06:07:49.983 回答