CODEWITHSUNDEEP
htmlcsscheckbox
Hommer Smith
Hommer Smith

Reputation: 27852

Align checkbox and label

I have a form which code looks like this:

<div id="right_sidebar">

<form id="your_name" name="your_name" action="#" method="post" style="display: block; "> 
    <fieldset>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" value="">
        <label for="lastname">Last Name</label>
        <input type="text" name="lastname" id="lastname">
                <label for="msg"><a href="#" rel="nofollow" id="msg_toggle">Comment <span class="sp"></span></a></label>
        <textarea name="msg" id="msg" rows="7"></textarea>
        <input type="checkbox" name="agree">
        <label for="agree">Accept the terms</label>
                <button class="blue_button" type="submit">Send</button>
    </fieldset>
    </form>

</div>​

And which is styled with the following CSS:

body {
color: #333;
font: 12px Arial,Helvetica Neue,Helvetica,sans-serif;
}

#right_sidebar {
padding-top: 12px;
width: 190px;
position:relative;
}

form {
background: #EEF4F7;
border: solid red;
border-width: 1px 0;
display: block;
margin-top: 10px;
padding: 10px;
}

form label {
color: #435E66;
    display:block;
font-size: 12px;
    }

form textarea {
border: 1px solid #ABBBBE;
margin-bottom: 10px;
padding: 4px 3px;
width: 160px;
-moz-border-radius: 3px;
border-radius: 3px;
}
form label a {
display: block;
padding-left: 10px;
position: relative;
text-decoration: underline;
}


form label a .sp {
background: #EEF4F7;
height: 0;
left: 0;
position: absolute;
top: 2px;
width: 0;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #333;
}

form button.blue_button {
margin-top: 10px;
vertical-align: top;
}

button.blue_button{
color: white;
font-size: 12px;
height: 22px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
button.blue_button {
background-color: #76C8C6;
border: 1px solid #7798B7;
text-shadow: 1px 1px 0px #567C9E;
}

​As you can see the checkbox is on top of the label. I would like both to be "on the same line". So, it would look like "[ ] Accept the terms". And how would I make that the text is vertically aligned to the checkbox.

How could I do both?

You can see it live here: form, checkbox failing

Upvotes: 5

Views: 64616

Answers (10)

user6914251
user6914251

Reputation:

I know this post is old, but I'd like to help those who will see this in the future. The answer is pretty simple.

<input type="checkbox" name="accept_terms_and_conditions" value="true" />
<label id="margin-bottom:8px;vertical-align:middle;">I Agree</label>

Upvotes: -1

dok
dok

Reputation: 80

The simplest way I found to have the checkbox and the label aligned is :

    .aligned {
        vertical-align: middle;
    }
    <div>
        <label for="check">
            <input class="aligned" type="checkbox" id="check" /> align me 
        </label>
    </div>
    <div>
        <input class="aligned" type="checkbox" />
        <label>align me too</label>
    </div>
    <div>
        <input type="checkbox" />
        <label>dont align me</label>
    </div>

Upvotes: 0

Tim Huesken
Tim Huesken

Reputation: 1

Tried the flex attribute? Here's your example with flex added:

  1. HTML

    <div id="right_sidebar">
<form id="send_friend" name="send_friend" action="#" method="post" style="display: block; ">
<fieldset>
    <label for="from">From</label>
    <input type="text" name="from" id="from" value="">
    <label for="to">To</label>
    <input type="text" name="to" id="to">
    <label for="msg"><a href="#" rel="nofollow" id="msg_toggle">Comment <span class="sp"></span></a>
    </label>
    <textarea name="msg" id="msg" rows="7"></textarea>
    <div class="row">
        <div class="cell" float="left">
            <input type="checkbox" name="agree">
        </div>
        <div class="cell" float="right" text-align="left">
            <label for="agree">Accept the terms</label>
        </div>
    </div>
    <button class="blue_button" type="submit">Send</button>
</fieldset>
</form>
</div>

  2. CSS

    body {
    color: #333;
    font: 12px Arial, Helvetica Neue, Helvetica, sans-serif;
}
[class="row"] {
    display: flex;
    flex-flow: row wrap;
    margin: 2 auto;
}
[class="cell"] {
    padding: 0 2px;
}
#right_sidebar {
    padding-top: 12px;
    width: 190px;
    position:relative;
}
form {
    background: #EEF4F7;
    border: solid red;
    border-width: 1px 0;
    display: block;
    margin-top: 10px;
    padding: 10px;
}
form label {
    color: #435E66;
    display:block;
    font-size: 12px;
}
form textarea {
    border: 1px solid #ABBBBE;
    margin-bottom: 10px;
    padding: 4px 3px;
    width: 160px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
form label a {
    display: block;
    padding-left: 10px;
    position: relative;
    text-decoration: underline;
}
form label a .sp {
    background: #EEF4F7;
    height: 0;
    left: 0;
    position: absolute;
    top: 2px;
    width: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #333;
}
form button.blue_button {
    margin-top: 10px;
    vertical-align: top;
}
button.blue_button {
    color: white;
    font-size: 12px;
    height: 22px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
button.blue_button {
    background-color: #76C8C6;
    border: 1px solid #7798B7;
    text-shadow: 1px 1px 0px #567C9E;
}

Flex allows for table style control with the use of divs for example.

Upvotes: 0

rernesto
rernesto

Reputation: 552

I had the same problem with bootstrap 3 horizontal-form, and finally found a try-error solution and works with plain html-css too. Check my Js Fiddle Demo

.remember {
    display: inline-block;
}
.remember input {
    position: relative;
    top: 2px;
}
<div>
    <label class="remember" for="remember_check">
        <input type="checkbox" id="remember_check" /> Remember me
    </label>
</div>

Upvotes: 0

Tarak
Tarak

Reputation: 1

Set a class on the checkbox list as follows:

<asp:CheckBoxList ID="chkProject" runat="server" RepeatLayout="Table" RepeatColumns="3" CssClass="FilterCheck"></asp:CheckBoxList>

Then add the following CSS:

.FilterCheck td {
    white-space:nowrap !important;
}

This ensures the label stays on the same line as the checkbox.

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

One option is to amend the style of the label element that follows the checkbox:

​input[type=checkbox] + label {
    display: inline-block;
    margin-left: 0.5em;
    margin-right: 2em;
    line-height: 1em;
}

JS Fiddle demo.

This is, however, somewhat fragile as the margins are a little arbitrary (and the margin-right is purely to force the following button to the next line). Also the attribute-equals selector may cause problems in older browsers.

As implied, in comments, by Mr. Alien it is actually easier to target the checkbox itself with this selector-notation:

input[type=checkbox] {
    float: left;
    margin-right: 0.4em;
}

JS Fiddle demo.

Upvotes: 10

Jon Egeland
Jon Egeland

Reputation: 12613

All you need to do is add display: inline to the label. Like this:

label[for="agree"] {
  display: inline;
}

You may also have to add the following to get the Send button to stay on its own line:

button[type="submit"] {
  display: block;
}

That is enough to make it work, but you could also nest the input inside the label, like this:

<label for="agree">
  <input type="checkbox" name="agree" />
  Accept the terms
</label>

However, most people avoid doing this because it is semantically constricting. I would go with the first method.

Upvotes: 0

Marko Francekovic
Marko Francekovic

Reputation: 1490

Forked your fiddle here with one small change. I nested the checkbox inside the label.

    <label for="agree"><input type="checkbox" name="agree">Accept the terms</label>

Hope it helps.

Upvotes: 0

Pastor Bones
Pastor Bones

Reputation: 7351

Wrap your checkbox and text within the <label> tag. Works with your current CSS as seen here in this jsFiddle Demo.

<label for="checkbox">
    ​<input id="checkbox" type="checkbox"> My Label
</label>​​​​​​​​​​​​​​​​​​​​​​​​​​

Upvotes: 1

11684
11684

Reputation: 7507

It is because the label has display: block on it. It means that (without a float or hack) it will claim it's own line.
Change it to display: inline-block or leave the display rule away and you're done.

Seeing you did this intentionally for the first two labels, you should give the accept the terms label an id and use form #accepttermslabel {display: inline-block}. This will override the other rules et because it is more specific.

Upvotes: 1

Related Questions