How to transform select option into option with images?

Question

How to transform select option into option with images?

Navigation

#1 by (1 votes)

1

I am doing a rating system on my website. I have select option with option of 1 to 5 voting I am trying to turn this select option with icons to make the voting but I am not able to like to know if it is possible and how I can do it.

Code used so far

select#teste option[value="1"]   { background-image:url(../rating/img/rating_no.png);   }
select#teste option[value="2"] {  background-image:url(../rating/img/rating_no.png); }
select#teste option[value="3"] {  background-image:url(../rating/img/rating_no.png); }
select#teste option[value="4"] {  background-image:url(../rating/img/rating_no.png); }
select#teste option[value="5"] {  background-image:url(../rating/img/rating_no.png); }

HTML

<select name="teste" id="teste">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

The idea is to stay that way

html css

asked by anonymous 03.05.2015 / 23:37

1 answer

Send emails with HTML / CSS embedded CakePhp How to ignore the height of an element inside a box with automatic height in CSS?

score 1 · Accepted Answer

Another option is to use ul and li instead of select and option to create the evaluation list.

Now to display the icons use label with a background and to mark the options use checkbox 'hidden':

.star {
    width:18px;
    height: 18px;
    display: inline-block;
    background:url(http://i.stack.imgur.com/S5T0M.png) no-repeat 0 0;
}
ul li { 
    position: relative; 
    display: inline-block;
}
ul li input[type="checkbox"] {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    opacity:0;
}
ul li input:checked + label,
ul li input:hover + label {
    background-position:0 -18px;
}

<ul>
  <li>
    <input type="checkbox" name="rating[]" value="1" />
    <label class="star"></label>
  </li>
  <li>
    <input type="checkbox" name="rating[]" value="2" />
    <label class="star"></label>
  </li>
  <li>
    <input type="checkbox" name="rating[]" value="3" />
    <label class="star"></label>
  </li>
</ul>

In this case javascript could be used to mark the checkboxes before the clicked item.