I need to make a select list where every item has two checkbox (or, at least, a single checkbox that can assume 3 values: 'x' 'v' or 'blank').
Right now I did with CSS using selected and adding the unicode character 2611 / 2610, but it has only two possible states, also if I add a second checkbox it will toggle with the click.
this code is my current situation: CSS:
select.control option::before {
content: "\2610"; /*2612 è la crocetta*/
width: 1.3em;
text-align: center;
display: inline-block;
}
select.control option:checked::before {
content: "\2611";
}
select.control[multiple]{
overflow-y:scroll;
min-height: 40px;
max-height: 30%
}
HTML:
<html>
<head><link rel='stylesheet' href='my.css'></link></head>
<body>
<fieldset class='field_set'>
<span class='field_span'>
<label style='vertical-align: top;'>Postazioni</label>
<select class='control' name="Choose values" multiple='multiple'>
<option value='v1'>P 1</option>
<option value='v2'>P 2</option>
<option value='v3'>P 3</option>
</select>
</span>
</fieldset>
</body></html>
and this is the output: Desired: 
Current: 
Note: obviously I'd like to get both the first and the second selection values. And, if possible, not to show any highlighting (selections are enough)
Aucun commentaire:
Enregistrer un commentaire