How to turn select option into option with images?

Asked

Viewed 639 times

1

I’m doing a rating system on my website. I have a select option with a 1 to 5 vote I’m trying to turn that select option with icons to take the vote but I’m not getting it I’d like to know if it’s 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

inserir a descrição da imagem aqui

1 answer

1


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

To display 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 checkboxes previous to the clicked item.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.