html - 将标签复选框的 CSS 分离到标签输入

Question

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

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

和复选框/单选框

<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 selection a element that come before another element？