Add separate CSS for input type checkbox

Question

I have an ASP.NET checkboxlist with "chkboxlistnames" as the class:

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

I populate this checkbox by using jQuery, Ajax and JSON method. After rendering HTML shows like this:

<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">[email protected],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;
}

This style is used for all checkboxes in this application, but I want a separate CSS for this checkbox using class chkboxlistnames, how to do that?

Change input[type="checkbox"]:not(old) + label { as input[class="chkboxlistnames"]:not(old) + label { — David R
– David R, Commented May 4, 2017 at 6:40
@DavidR Why input[class="chkboxlistnames"] and not just use input.chkboxlistnames? — godfrzero
– godfrzero, Commented May 4, 2017 at 6:40
@godfrzero For one thing, the first is more precise; it works only on inputs with one class name. — Mr Lister
– Mr Lister, Commented May 4, 2017 at 6:42
@MrLister Not sure if that's relevant or expected in this case though. Anyway, irrelevant since the class is on the parent. — godfrzero
– godfrzero, Commented May 4, 2017 at 6:44
@David R after rendering class=chkboxlistnames added with class of table element — Alphy
– Alphy, Commented May 4, 2017 at 6:53

Prateek Arora · Accepted Answer · 2017-05-04 09:10:59Z

2

chkboxlistnames is in the parent element, so it should be like this:

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

edited May 4, 2017 at 9:10

user4447799

answered May 4, 2017 at 6:43

Prateek Arora

2742 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kushan · Accepted Answer · 2017-05-04 06:47:07Z

0

First method,

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

Second method,

#MainContent_chkName_0{
   //css here
}

answered May 4, 2017 at 6:47

Kushan

10.7k4 gold badges39 silver badges41 bronze badges

Collectives™ on Stack Overflow

Add separate CSS for input type checkbox

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related