Breaking News: Grepper is joining You.com. Read the official announcement!

como fazer estrelas de avaliação html css

Alessandra Romualdo answered on April 24, 2023 Popularity 1/10 Helpfulness 1/10

answer como fazer estrelas de avaliação html css

como fazer estrelas de avaliação html css

Comment

/* Estilo das estrelas quando elas estão "ativadas" checked */
%checked-star {
  color: #FFE000;
}
 
/* Estilo das estrelas quando elas estão "desativadas" unchecked */
%unchecked-star {
  color: #CCC;
}
 
/*
  Esconde o texto de elementos
  source https://github.com/h5bp/html5-boilerplate/commit/aa0396eae757
*/
%hide-text {
  font: "0/0" a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
 
/*
  Esconde um elemento de forma que continue acessível via teclado
 
http://getbootstrap.com/css/#helper-classes-screen-readers
 
*/
%hide-element {
  position: absolute;
  top: -999999em;
  left: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
 
/*
  Escreve os seletores das estrelas para marcalas como "ativas" checked, quando um input radio 3 está "ativo" checked, as estrelas 3, 2 e 1 devem aparecer "ativas", esse loop escreve essas classes para nós.
*/
@for $group from 1 through 5 {
  @for $item from 1 through $group {
    .radio-#{$group}:checked ~ .star-item-#{$item}:before,
    /* Focus, importante para dar o estilho mesmo quando for ativado via teclado */
    .radio-#{$group}:focus ~ .star-item-#{$item}:before {
      @extend %checked-star;
    }
  }
}
 
.star {
  display: inline-block;
  flex-wrap: wrap;
  pointer-events: none;
  /* max-width: 5em; */
}
 
.star-item {
  cursor: pointer;
  display: inline-block;
  pointer-events: initial;
  width: 1em;
  height: 1em;
  overflow: hidden;
  line-height: 100%;
  @extend %hide-text;
 
  /* Estilo padrão das estrelas */
  &:before {
    transition: color 200ms;
    transform: translate3d(0, 0, 0);
    will-change: color;
    content: '\2605';
    @extend %unchecked-star;
  }
 
  /* Ao passar o mouse em uma estrela, essa estrela fica amarela */
  &:hover:before {
    @extend %checked-star;
  }
 
  /* Ao passar o mouse em uma estrella, as estrelas adjacentes ficam como unchecked (Isso é um truque para não precisar mudar a ordem de disposição dos elementos para rtl) */
  &:hover ~ .star-item:before {
    @extend %unchecked-star;
  }
}
 
/* Ao passar o mouse no container das estrelas, todos os itens ficam como marcados */
.star:hover .star-item:before {
  @extend %checked-star;
}
 
/* Esconde os input radio de forma que continuem acessíveis via teclado */
.radio {
  @extend %hide-element;
}
 
/* Ordena os itens da direita para a esquerda */
.star:dir(rtl), .star.rtl {
  .star-item { direction: rtl; }
}

Popularity 1/10 Helpfulness 1/10 Language css

Source: imasters.com.br

Tags: css html

Link to this answer
Share Copy Link

Contributed on Apr 24 2023

Alessandra Romualdo

0 Answers Avg Quality 2/10

como fazer estrelas de avaliação html css

Contents

More Related Answers

como fazer estrelas de avaliação html css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.