为输入类型添加单独的CSS复选框

时间:2017-05-04 06:38:33

标签: html css

我有一个带有" chkboxlistnames"的ASP.NET复选框。作为班级:

<asp:CheckBoxList ID ="chkName" runat="server"  RepeatDirection="Horizontal" CssClass="chkboxlistnames" >
<asp:ListItem Text="" Value=""  ></asp:ListItem>
</asp:CheckBoxList>

我使用jQuery,Ajax和JSON方法填充此复选框。渲染HTML后显示如下:

<table id="MainContent_chkName" class="chkboxlistnames">
<tbody>
<tr>
<td>
<input id="MainContent_chkName_0" name="UserID" value="2009" type="checkbox">
<label for="MainContent_chkName_0">lekshmi@actsinfo.biz,Lekshmi</label>
</td>
</tr>
</tbody>
</table>

CSS:

input[type="checkbox"]:not(old) + label {
    display: inline-block;
    margin-left: -8px;
    background: url('../img/checks.png') no-repeat 197px 1px;
    line-height: 24px;
    width: 222px;
    text-align: left;
}
label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

此样式用于此应用程序中的所有复选框,但我想使用类chkboxlistnames为此复选框单独的CSS,该怎么做?

2 个答案:

答案 0 :(得分:2)

chkboxlistnames在父元素中,所以它应该是这样的:

.chkboxlistnames input[type="checkbox"] {
    //Your CSS goes here
}

答案 1 :(得分:0)

第一种方法,

.chkboxlistnames input[type="checkbox"] {
   //css here
}

第二种方法,

#MainContent_chkName_0{
   //css here
}