HTML/CSS: Styling a checkbox inside a form - html

Question

I have the following form:
Using this HTML:
<form id="user_form" name="user_form">
<input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
<br>
<input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
<br>
<input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
<br>
<input id="email" type="email" name="email" placeholder="Email" required>
<br>
<input id="conditions" type="checkbox" name="conditions" required>Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!
<br>
<input id="user_save" type="submit" value="Speichern">
</form>
And this CSS:
#user_form input[type="text"], input[type="email"], input[type="submit"] {
width: 80%;
display: block;
margin: 0 auto;
height: 50px !important;
font-size: 18px;
line-height: normal;
line-height: 32px\0/;
/* for IE 8 */
}
#user_form input[type="checkbox"] {
width: 80%;
display: inline !important;
margin: 0 !important;
padding: 0 !important;
height: 50px !important;
}
What i dont understand is:
Why isnt the checkbox aligned to the left. There should not be that padding to the left of the checkbox. i set margin and padding to 0.
Why is there so much space between the checkbox and the text right of the textbos? The Text needs to be directly to the right of the checkbox with maybe 20px padding. I also need that text to be centered vertically
Why is the text not linebreaking? the checkbox together with the text should have a width of 80% like all the other inputs.
Hope you can help me.

Answer 1

https://jsfiddle.net/p04prk6p/ here is what you need. Just layer a div around it
CSS
#user_form input[type="text"], input[type="email"], input[type="submit"] {
width: 80%;
display: block;
margin: 0 auto;
height: 50px !important;
font-size: 18px;
line-height: normal;
line-height: 32px\0/;
/* for IE 8 */
}
#user_form input[type="checkbox"] {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
height: 50px !important;
float: left;
}
#checkbox_div {
width: 80%;
margin: 0 auto;
line-height: 50px;
}
HTML
<form id="user_form" name="user_form">
<input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
<br>
<input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
<br>
<input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
<br>
<input id="email" type="email" name="email" placeholder="Email" required>
<br>
<div id="checkbox_div"><input id="conditions" type="checkbox" name="conditions" required>Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!</div>
<br>
<div style="clear: both"></div>
<input id="user_save" type="submit" value="Speichern">
</form>

Answer 2

The problem you're having is that you have a width of 80% on your checkbox. This causes it to be moved to the right as well as pushing the text to the right.
Also don't use !important, it shouldn't be necessary in your case.
To make the alignment of your form inputs I'd suggest that you wrap them all and then leave them to the left. Instead of using 0 auto to center the inputs. Then your checkbox will align properly with the inputs. The way you're having it now, it never will whilst keeping the text exactly to the right.

Answer 3

#user_form input[type="text"], input[type="email"], input[type="submit"] { width: 80%; display: block; margin: 0 auto; height: 50px !important; font-size: 18px; line-height: normal; line-height: 32px\0/; /* for IE 8 */ }
.CheckBox{ width: 80%; text-align: center;}
<form id="user_form" name="user_form">
<input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
<br>
<input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
<br>
<input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
<br>
<input id="email" type="email" name="email" placeholder="Email" required>
<br>
<p class="CheckBox"> <input id="conditions" type="checkbox" name="conditions" required>Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!</p>
<br>
<input id="user_save" type="submit" value="Speichern">
</form>

Answer 4

#user_form input[type="text"], input[type="email"], input[type="submit"] {
width: 80%;
display: block;
margin: 0 auto;
height: 50px !important;
font-size: 18px;
line-height: normal;
line-height: 32px\0/;
/* for IE 8 */
}
#user_form input[type="checkbox"] {
width: 30px;
display: inline;
margin: 0;
padding: 0;
height: 50px;
}
<form id="user_form" name="user_form">
<input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
<br>
<input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
<br>
<input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
<br>
<input id="email" type="email" name="email" placeholder="Email" required>
<br>
<input id="conditions" type="checkbox" name="conditions" required>Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!
<br>
<input id="user_save" type="submit" value="Speichern">
</form>
Your problem is your width property. A check box has an Aspect Ratio 1:1. So give it a width of 30px will do the trick. 80% is really big

Answer 5

1: your input[type='checkbox'] contains a width of 80%, make it square size like 50px;
2: Same issue your input is 80% width of the parent and margin: 0 auto center it.
3: For linebreaks only work properly while using it in text like in a

Answer 6

<style>
#user_form input[type="text"], input[type="email"], input[type="submit"] {
width: 80%;
display: block;
margin: 0 auto;
height: 50px !important;
font-size: 18px;
line-height: normal;
line-height: 32px\0/;
/* for IE 8 */
}
label{
width: 100%;
float: left;
text-align: center;
margin: 20px 0px;
}
label > a{
color: #2a00ff;
z-index: 99999;
}
</style>
<form id="user_form" name="user_form">
<input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
<br>
<input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
<br>
<input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
<br>
<input id="email" type="email" name="email" placeholder="Email" required>
<br>
<label>
<input id="conditions" type="checkbox" name="conditions" required>
Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!
</label>
<br>
<input id="user_save" type="submit" value="Speichern">
</form>

Answer 7

Wrap your check box and label inside a div and give it a width of 80%. You can remove the padding and margin rules.
Height of the check box makes it to misalign with the text.
The text won't wrap because width is set to check box and not the text.
#user_form input[type="text"],
input[type="email"],
input[type="submit"] {
width: 80%;
display: block;
margin: 0 auto;
height: 50px !important;
font-size: 18px;
line-height: normal;
line-height: 32px\0/;
/* for IE 8 */
}
#user_form input[type="checkbox"] {
display: inline;
}
.checkbox {
margin: 0 auto;
width: 80%;
}
<form id="user_form" name="user_form">
<input type="text" id="firstname" name="firstname" placeholder="Vorname" required="">
<br>
<input type="text" id="lastname" name="lastname" placeholder="Nachname" required="">
<br>
<input type="text" id="nickname" name="nickname" placeholder="Nickname" required="">
<br>
<input type="email" id="email" name="email" placeholder="Email" required="">
<br>
<div class="checkbox">
<input type="checkbox" id="conditions" name="conditions" required="">
<label for "conditions"="">Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!</label>
</div>
<br>
<input type="submit" id="user_save" value="Speichern">
</form>