Html/css - Unable to align custom checkboxes one under the other

Question

I'm constructing custom checkboxes instead of the default ones. I need to align them one under another, the problem is if I set:

input[type=checkbox] {
    display:none;
}

In order to hide the default checkbox, the rest of the checkboxes don't align in one column. If I set display:block;, they do align as I need them, but I see the custom checkbox and the default. How do I workaround this behavior?

HTML:

<div id="checkBoxesContainer">
        <input type='checkbox' value='valuable1' /><label for="thing"></label> Content 5
        <input type='checkbox' value='valuable2' /><label for="thing"></label> Content 4
        <input type='checkbox' value='valuable3' /><label for="thing"></label> Content 3
        <input type='checkbox' value='valuable4' /><label for="thing"></label> Content 2
        <input type='checkbox' value='valuable5' /><label for="thing"></label> Content 1
    </div> 

CSS:

input[type=checkbox] {
    display:block;
}

input[type=checkbox] + label
{
    background-color: grey;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
}
input[type=checkbox]:checked + label
{
    background-color: blue;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
}

JSfiddle

Second question, what is the usage of for in the label and name in the input?

Answer 1

Ok first, it's good to put the text inside the label. Second if you set your default checkbox display:none then it wouldn't be clickable. You can set it as visibility: hidden instead.

The purpose of the for is to point to which input are we targeting/bound to. So for checkbox if you click the text label even without clicking the default checkbox it will still check it.

input[type=checkbox] {
    display:block;
    visibility: hidden;
}

label span
{
    background-color: grey;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
    margin-right: 5px
}
input[type=checkbox]:checked + label span
{
    background-color: blue;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
}

<div id="checkBoxesContainer">
    <input type='checkbox' value='valuable1' id="valuable1"/><label for="valuable1"><span></span> Content 5</label> 
        <input type='checkbox' value='valuable2' id="valuable2"/><label for="valuable2"><span></span> Content 4</label> 
        <input type='checkbox' value='valuable3' id="valuable3"/><label for="valuable3"><span></span> Content 3</label> 
        <input type='checkbox' value='valuable4' id="valuable4"/><label for="valuable4"><span></span> Content 2</label> 
        <input type='checkbox' value='valuable5' id="valuable5"/><label for="valuable5"><span></span> Content 1</label> 
    </div> 

Answer 2

To answer your second question: The name attribute sets, well, the name of the value that should be entered in the input element. When the user input gets evaluated, typically by some kind of server side technology like PHP, the values are identified by those names. For example, say you have a field for first name and a field for last name

<input type="text" name="first_name" />
<input type="text" name="last_name" />

If you send a form with those input elements (and probably some more) with a POST request to a PHP script, you can access the values the user entered in the $_POST array by the names as indexes

<?php
// any kind of user input filtering, error handling and such
// ommitted for brevity and clarity
echo "<p>Your first name is " . $_POST['first_name'] . "</p>";
echo "<p>Your last name is " . $_POST['last_name'] . "</p>";
?>

The for attribute of the label element connects the label to the input field the label element is, well, the label of. The connection is not done by the name of the input element, as one could assume, but by its id.

<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male" />
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female" />
<label for="female">Other</label>
<input type="radio" name="gender" id="other" value="other" />

label with for doesn't have a direct effect on how a web browser displays your page. But there are several interesting effects. For example, if you tell a browser to which input a label belongs and a user clicks on the label, the browser should set the cursor to the input. labels also give the client reading your code more information if your page isn't displayed in a webbrowser, but for example is read in a text-to-speech system for visually impaired users. Another interesting topic is the so called "semantic web". There you write code that can not only displayed by machines (like a browser), but that can be to a certain degree understood and interpreted by machines. For this, stating in your code "this label element is labeling that input element" is obviously helpful.

Answer 3

You must wrapp the content on label tag. Using for for focuse your checkbox add label for="ident" and input id="ident".

You can also use ::after and before for styles your checkbox. Example

input[type=checkbox]:after {
    content: "";
    background-color: grey;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
}
input[type=checkbox]:checked:after {
    content: "";
    background-color: red;
    height: 15px;
    width: 15px;
    display:inline-block;
    padding: 0 0 0 0px;
    position: absolute;
}

and take position relative for your base chcecbox. Fiddle