Menu icon Foundation
Styling checkbox or label?

We're trying to do something like this:

[ x ] - Long label text that goes next to checkbox and is really long -

The issue is when the long label wraps, the text all goes below the box because the CSS is set to display:inline-block, leaving the little checkbox all on it's lonesome and with nary any label text anywhere nearby. Like this:

[ x ]

- Long wrapped label text that was next to
checkbox and is nowhere near the box now -

I can fix this with some css, but I'm having a hard time getting the correct style, for both the label and the box.

I've been trying to do this:

.input[type="checkbox"] {display:inline;}

But that's not working. Even with an added "!important"

Any suggestions?

checkbox stylelabel stylecheckbox csslabel css

We're trying to do something like this:

[ x ] - Long label text that goes next to checkbox and is really long -

The issue is when the long label wraps, the text all goes below the box because the CSS is set to display:inline-block, leaving the little checkbox all on it's lonesome and with nary any label text anywhere nearby. Like this:

[ x ]

- Long wrapped label text that was next to
checkbox and is nowhere near the box now -

I can fix this with some css, but I'm having a hard time getting the correct style, for both the label and the box.

I've been trying to do this:

.input[type="checkbox"] {display:inline;}

But that's not working. Even with an added "!important"

Any suggestions?

Monk over 5 years ago

Well I answered my own question:

input[type="checkbox"] + label {display:inline;line-height:0.5rem;}
input[type="checkbox"] {margin-bottom:0;}

This works, I just needed to remove the "." in front of each class and add an extra to separate the lines, as I couldn't get the class "label" to take a 1rem bottom margin.

r2d2 about 3 years ago

Thank you. That saved me time!