将标签CSS复制到标签输入

Question

我在两个输入文本框中都使用了label:

<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... */ }