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
}
Aucun commentaire:
Enregistrer un commentaire