CSS format for checkboxes

Question

I have a list of checkboxes, each one with a label:

    <input type="checkbox" id="patient-birth_city" name="patient-birth_city" />
    <label for="patient-birth_city">(_PATIENT_BIRTH_CITY_)</label>
    <input type="checkbox" id="patient-birth_state" name="patient-birth_state" />
    <label for="patient-birth_state">(_PATIENT_BIRTH_STATE_)</label>
    <input type="checkbox" id="patient-birth_country" name="patient-birth_country" />
    <label for="patient-birth_country">(_PATIENT_BIRTH_COUNTRY_)</label>

Without using any CSS they are showed in the same line (I suppose they have a default "inline" or "block-inline" display). The problem is I can't modify HTML structure and I need each pair checkbox-label appear in a new line. Like this. Is it possible using only CSS?

Tomgrohl · Accepted Answer · 2011-08-31 08:48:47Z

8

The good thing about label tags is you can wrap the input elements:

<label>
    <input type="checkbox" id="birth_city" name="birth_city" />
    City
</label>
<label>
    <input type="checkbox" id="birth_state" name="birth_state" />
    State
</label>
<label>
    <input type="checkbox" id="birth_country" name="birth_country" />
    Country
</label>

And if you add the following CSS:

label {
    display: block;   
}

It will display it how you want.

Demo here

As you CAN'T edit your HTML, this CSS would work:

input, label {
    float: left;   
}

input {
    clear: both;    
}

Demo here

edited Aug 31, 2011 at 8:48

answered Aug 31, 2011 at 8:41

Tomgrohl

1,75710 silver badges16 bronze badges

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

1 Comment

Willem Over a year ago

he says he can't modify html structure, so this is not a solution. please read the question.

Willem · Accepted Answer · 2011-08-31 08:52:55Z

4

Using float:left and clear:left you can do this with only css. Demo: http://jsfiddle.net/VW529/2/

input {margin:3px;}
input, label {float:left;}
input {clear:left;}

The only problem is that the example does not show more information of parent elements, giving the container element overflow:hidden and/or clear:both might be needed to prevent floating elements next to the last label. (edited jsfiddle code with container div)

edited Aug 31, 2011 at 8:52

answered Aug 31, 2011 at 8:40

Willem

5,4042 gold badges25 silver badges44 bronze badges

3 Comments

Willem Over a year ago

whoever gave this a -1: please explain why!

Tomgrohl Over a year ago

+1 Clear and Float might be the only way to go as HMTL structure can't be changed, so I'm no sure either.

Willem Over a year ago

yep, edited my code, overflow:hidden was all that was needed, position:relative had no effect (FF6)

Collectives™ on Stack Overflow

CSS format for checkboxes

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related