Separate CSS for label checkbox to label input

Question

I have used label for with both input textboxes:

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

and checkboxes/radioboxes

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

The trouble I have is how do I specify different css for the labels for different input types.

If I do a generic label css:

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

I find I either end up with unaligned checkboxes or badly positioned textboxes.

CaribouCode · Accepted Answer · 2013-07-31 15:45:03Z

15

You could add classes to the labels. For example:

<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">

Then use the class values in CSS:

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

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

Alternatively, if you had the labels after the inputs, you could select like this:

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

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

answered Jul 31, 2013 at 15:45

CaribouCode

14.5k33 gold badges113 silver badges187 bronze badges

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

1 Comment

KnowHowSolutions Over a year ago

Also labels can have an id. So if you want a specific style for one label.

DilumN · Accepted Answer · 2015-03-31 09:23:37Z

6

You could write css selector like this will work:

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

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

edited Mar 31, 2015 at 9:23

DilumN

2,8956 gold badges33 silver badges45 bronze badges

answered Mar 31, 2015 at 9:04

Anil Sharma

1251 silver badge6 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:18:06Z

0

You could write your css selector like this:

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

You may also have a look at this thread:
CSS Selector for selecting an element that comes BEFORE another element?

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Jul 31, 2013 at 15:43

Matthias Holdorf

1,0601 gold badge15 silver badges19 bronze badges

Collectives™ on Stack Overflow

Separate CSS for label checkbox to label input

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related