1

Estou a fazer um sistema de rating no meu site. Tenho um select option com opção de 1 a 5 de votação estou a tentar transformar esse select option com icones para fazerem a votação mas não estou a conseguir gostaria de saber se e possível e como o poderei fazer.

Codigo Utilizado até ao momento

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>

A ideia é ficar dessa forma

inserir a descrição da imagem aqui

1 Resposta 1

1

Uma outra opção é utilizar ul e li ao invés do select e option para criar a lista de avaliação.

Já para exibir os ícones utilize o label com um plano de fundo e para marcar as opções utilize checkbox 'escondido':

.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>

Neste caso poderia ser utilizado javascript para marcar os checkboxes anteriores ao item clicado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .