lundi 27 avril 2015

Html\CSS - unable to align custom Select tag along with a custom Checkbox

I've created several custom checkboxes, where the first element is also a select element. I need all the elements to be in the same line, but in order to reduce the margin between each line I used line-height=something property, but this causes the text of the select element to be distorted\cut, so I lowered the text of the select manually but I'm unable to lower its checkbox as well.

HTML:

<div id="checkBoxesContainer">
    <input type='checkbox' value='valuable1' id="valuable1"/><label for="valuable1"><span></span></label>
    <div>
        <select>
            <option value="0">Test content</option>
            <option value="1">Content 1</option>
            <option value="2">Content 2</option>
            <option value="3">Content 3</option>
            <option value="4">Content 4</option>
        </select>
    </div>
    <input type='checkbox' value='valuable2' id="valuable2"/><label for="valuable2"><span></span></label><div>qwertyu</div>
    <input type='checkbox' value='valuable3' id="valuable3"/><label for="valuable3"><span></span></label><div>asdfghj</div>
    <input type='checkbox' value='valuable4' id="valuable4"/><label for="valuable4"><span></span></label><div>zxcvbnm</div>
    <input type='checkbox' value='valuable5' id="valuable5"/><label for="valuable5"><span></span></label><div>qazwsxe</div>
</div> 

CSS:

/* for the custom checkboxes!! */
input[type=checkbox] {
    display:block;
    visibility: hidden;
}

label span
{
   background-color: grey;
    height: 20px;
    width: 20px;
    display:inline-block;
    cursor: pointer;
}
input[type=checkbox]:checked + label span
{
    background-color: red;
    height: 20x;
    width: 20px;
    display:inline-block;
    cursor: pointer;
}

#checkBoxesContainer{
    width: 500px;
    display: block;
    margin: 50px auto;
    font-size: 18px;
    line-height: 10px;
}

select {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    -op-appearance: none;
    height: auto;
    padding: 0 35px 0 0;
    line-height: 25px;
    border: none;
    bottom: -15px;
    background:  url("http://ift.tt/1A4rWCM") no-repeat right center;
}
#checkBoxesContainer div{
    position: relative;
    width: 550px;
    left: 65px;
    bottom: 15px;
    color: #cfcecf;
    font-family: 'Open Sans', sans-serif;
    line-height: 5px
}

JSfiddle




Aucun commentaire:

Enregistrer un commentaire