Question

我在两个输入文本框中都使用了标签：

<label for="Username">Username</label>
<input id="Username"  type="text" value="">

和复选框/ radioboxes

<label for="Live">System is Live</label>
<input id="Live" name="Live" type="checkbox" value="false">

我遇到的问题是如何为不同输入类型的标签指定不同的css。

如果我使用通用标签css：

label {
    color: #00a8c3;
    line-height: 20px;
    padding: 2px;
    display: block;
    float: left;
    width: 160px;
}

我发现我最终得到了未对齐的复选框或文本框位置不正确。

Answer 1

您可以向标签添加类。例如：

<label for="Username" class="textbox-label">Username</label>
<input id="Username" type="text" value="">

<label for="Live" class="checkbox-label">System is Live</label>
<input id="Live" name="Live" type="checkbox" value="false">

然后使用CSS中的类值：

label.textbox-label {
 /*some styles here*/
}

label.checkbox-label {
 /*some styles here*/
}

或者，如果您在输入后面有标签，则可以选择如下：

input[type="text"] + label { 
  /*some styles here*/
}

input[type="checkbox"] + label { 
  /*some styles here*/
}

Answer 2

你可以写这样的css选择器：

label[for=Username]{ /* ...definitions here... / } 

label[for=Live] { / ...definitions here... */ }

Answer 3

你可以像这样编写你的css选择器：

label[for=Username] 
label[for=Live]

你也可以看一下这个帖子：
CSS Selector for selecting an element that comes BEFORE another element?

将标签CSS复制到标签输入

3 个答案: