7

Possuo este radio group no qual serve para especificar o nível de gravidade de uma determinada ocorrência, usando as cores para classificar o nível.

Veja:

<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>

   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

   <style>
   .btn-default.amarelo{
      background: yellow;
   }
   .btn-default.amarelo:hover{
      background: rgb(240, 240, 0);
   }
   .btn-default.amarelo.active{
      background: rgb(230, 230, 0);
   }
   .btn-default.laranja{
      background: orange;
   }
   .btn-default.laranja:hover{
      background: rgb(255, 140, 0);
   }
   .btn-default.laranja.active{
      background: rgb(255, 125, 0);
   }
   .btn-default.vermelho{
      background: red;
   }
   .btn-default.vermelho:hover{
      background: rgb(240, 0, 0);
   }
   .btn-default.vermelho.active{
      background: rgb(230, 0, 0);
   }
   </style>
</head>
<body>
<h1>
   Nível de gravidade
</h1>
<div class="form-group">

   <div class="btn-group" data-toggle="buttons">

      <label class="btn btn-default active">
         <input type="radio" value="B" checked autocomplete="off"> Branco
      </label>

      <label class="btn btn-default amarelo">
         <input type="radio" value="A" autocomplete="off"> Amarelo
      </label>
      
      <label class="btn btn-default laranja">
         <input type="radio" value="L" autocomplete="off"> Laranja
      </label>
      
      <label class="btn btn-default vermelho">
         <input type="radio" value="V" autocomplete="off"> Vermelho
      </label>

   </div>

</div>
</body>
</html>

Repare que quando eu seleciono uma das opções de cores e em seguida removo o foco do radio button, o radio button que está selecionado fica quase imperceptível, parecendo que ele não esta selecionado. Isso pode confundir o usuário, levando ele a crer que não selecionou direito a opção desejada.

Perguntas

  • Como eu poderia fazer com que o radio button selecionado se destacasse entre os demais?
  • Poderia haver um efeito visual na opção selecionada?

Acredito que desta forma o usuário não iria se confundir em questão disto.

PS: O radio button que estiver selecionado não pode ter sua cor alterada, porque ela tem uma finalidade.

6 Respostas 6

11

Use um elemento ::after por exemplo, veja

<html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
        </head>
        
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
                
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
                
                <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        
                <style>
                    .btn-default.branco.active{
                        box-shadow: 0 0 5px 1px rgba(0, 0, 0, .5);
                        background-color: #e6e6e6;
                    }
                    .btn-default.branco.active::after{
                        content: "";
                        width: 100%;
                        height: 3px;
                        position: absolute;
                        bottom: -10px;
                        left: 0;
                        background-color: #e6e6e6;
                        border-color: #adadad;
                    }
                    .btn-default.amarelo{
                        background: yellow;
                    }
                    .btn-default.amarelo:hover{
                        background: rgb(240, 240, 0);
                    }
                    .btn-default.amarelo.active{
                        background: rgb(230, 230, 0);
                        box-shadow: 0 0 5px 1px rgba(0, 0, 0, .5);
                        border: 1px solid yellow;
                    }
                    .btn-default.amarelo.active::after{
                        content: "";
                        width: 100%;
                        height: 3px;
                        position: absolute;
                        bottom: -10px;
                        left: 0;
                        background: rgb(230, 230, 0);
                    }
                    .btn-default.laranja{
                        background: orange;
                    }
                    .btn-default.laranja:hover{
                        background: rgb(255, 140, 0);
                    }
                    .btn-default.laranja.active{
                        background: rgb(255, 125, 0);
                        box-shadow: 0 0 5px 1px rgba(0, 0, 0, .5);
                        border: 1px solid orange;
                    }
                    .btn-default.laranja.active::after{
                        content: "";
                        width: 100%;
                        height: 3px;
                        position: absolute;
                        bottom: -10px;
                        left: 0;
                        background: rgb(255, 125, 0);
                    }
                    .btn-default.vermelho{
                        background: red;
                    }
                    .btn-default.vermelho:hover{
                        background: rgb(240, 0, 0);
                    }
                    .btn-default.vermelho.active{
                        background: rgb(230, 0, 0);
                        box-shadow: 0 0 5px 1px rgba(0, 0, 0, .5);
                        border: 1px solid red;
                    }
                    .btn-default.vermelho.active::after{
                        content: "";
                        width: 100%;
                        height: 3px;
                        position: absolute;
                        bottom: -10px;
                        left: 0;
                        background: rgb(230, 0, 0);
                    }
                </style>
                <body>
                <h1>
                  Nível de gravidade
                </h1>
                <div class="form-group">
                
                  <div class="btn-group" data-toggle="buttons">
                
                    <label class="btn btn-default branco active">
                          <input type="radio" value="B" checked autocomplete="off"> Branco
                      </label>
                
                    <label class="btn btn-default amarelo">
                          <input type="radio" value="A" autocomplete="off"> Amarelo
                      </label>
                
                    <label class="btn btn-default laranja">
                          <input type="radio" value="L" autocomplete="off"> Laranja
                      </label>
                
                    <label class="btn btn-default vermelho">
                          <input type="radio" value="V" autocomplete="off"> Vermelho
                      </label>
                
                  </div>
                
                </div>
        </body>
        </html>

2
  • O branco não está aparecendo no branco xD
    – Randrade
    Commented 6/12/2017 às 19:05
  • @Randrade já arrumei, agora está certinho ;)
    – hugocsl
    Commented 6/12/2017 às 19:13
8

O que acha dessa ideia?

Quando a classe .active é adicionada, um ícone do Glyphicons (padrão do Bootstrap) é inserido ao botão através do seletor ::after do CSS.

.btn-default.amarelo
{
  background: yellow;
}

.btn-default.amarelo:hover
{
  background: rgb(240, 240, 0);
}

.btn-default.amarelo.active,
.btn-default.amarelo:active
{
  background: rgb(230, 230, 0) !important;
}

.btn-default.laranja
{
  background: orange;
}

.btn-default.laranja:hover
{
  background: rgb(255, 140, 0);
}

.btn-default.laranja.active,
.btn-default.laranja:active
{
  background: rgb(255, 125, 0) !important;
}

.btn-default.vermelho
{
  background: red;
}

.btn-default.vermelho:hover
{
  background: rgb(240, 0, 0);
}

.btn-default.vermelho.active,
.btn-default.vermelho:active
{
  background: rgb(230, 0, 0) !important;
}

.btn-default.active::after
{
  font-family: 'Glyphicons Halflings';
  font-size: 12px;
  content: '\e013';
}
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div>
  <h1>Nível de gravidade</h1>
  
  <div class="form-group">
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-default active">
        <input type="radio" value="B" checked autocomplete="off"> Branco
      </label>
      <label class="btn btn-default amarelo">
        <input type="radio" value="A" autocomplete="off"> Amarelo
      </label>
      <label class="btn btn-default laranja">
        <input type="radio" value="L" autocomplete="off"> Laranja
      </label>
      <label class="btn btn-default vermelho">
        <input type="radio" value="V" autocomplete="off"> Vermelho
      </label>
    </div>
  </div>
</div>

7

Segue uma sugestão para destacar a opção selecionada.

Adicionei um fundo ao texto e fiz com que ele alterna-se de acordo com a gravidade selecionada:

CSS adicionado:

h1 {
  background-color: rgb(212, 212, 212);
  width:305px;
  border-radius: 10px;
}

.btn-default.active {
  font-weight:bold;
}

JS adicionado:

$(".btn-default").on("click", function(){
  $("h1").css("background-color", $(this).css("background-color"));
});

Exemplo:

$(".btn-default").on("click", function(){
  $("h1").css("background-color", $(this).css("background-color"));
});
h1 {
  background-color: rgb(212, 212, 212);
  width:305px;
  border-radius: 10px;
}

.btn-default.active {
  font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <style>
            .btn-default.amarelo{
                background: yellow;
            }
            .btn-default.amarelo:hover{
                background: rgb(240, 240, 0);
            }
            .btn-default.amarelo.active{
                background: rgb(230, 230, 0);
            }
            .btn-default.laranja{
                background: orange;
            }
            .btn-default.laranja:hover{
                background: rgb(255, 140, 0);
            }
            .btn-default.laranja.active{
                background: rgb(255, 125, 0);
            }
            .btn-default.vermelho{
                background: red;
            }
            .btn-default.vermelho:hover{
                background: rgb(240, 0, 0);
            }
            .btn-default.vermelho.active{
                background: rgb(230, 0, 0);
            }
        </style>
        <body>
        <h1>
          Nível de gravidade
        </h1>
        <div class="form-group">
        
          <div class="btn-group" data-toggle="buttons">
        
            <label class="btn btn-default active">
                  <input type="radio" value="B" checked autocomplete="off"> Branco
              </label>
        
            <label class="btn btn-default amarelo">
                  <input type="radio" value="A" autocomplete="off"> Amarelo
              </label>
        
            <label class="btn btn-default laranja">
                  <input type="radio" value="L" autocomplete="off"> Laranja
              </label>
        
            <label class="btn btn-default vermelho">
                  <input type="radio" value="V" autocomplete="off"> Vermelho
              </label>
        
          </div>
        
        </div>
</body>
</html>

1
  • Sugestão criativa +1
    – Randrade
    Commented 6/12/2017 às 19:04
6

Cada vez que é clicado num button é adicionado nele uma classe .active, então pode ser criado um estilo específico para essa classe. Seguindo o padrão do focus do button pode ser adicionado por exemplo um box-shadow nele quando ele for selecionado

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <style>
           .btn.active {
               box-shadow: 1px 0px 7px 1px #396bbb;
           }
           .btn:focus{
               outline: 0 none!important;
            }
            .btn-default.amarelo{
                background: yellow;
            }
            .btn-default.amarelo:hover{
                background: rgb(240, 240, 0);
            }
            .btn-default.amarelo.active{
                background: rgb(230, 230, 0);
            }
            .btn-default.laranja{
                background: orange;
            }
            .btn-default.laranja:hover{
                background: rgb(255, 140, 0);
            }
            .btn-default.laranja.active{
                background: rgb(255, 125, 0);
            }
            .btn-default.vermelho{
                background: red;
            }
            .btn-default.vermelho:hover{
                background: rgb(240, 0, 0);
            }
            .btn-default.vermelho.active{
                background: rgb(230, 0, 0);
            }
        </style>
        <body>
        <h1>
          Nível de gravidade
        </h1>
        <div class="form-group">
        
          <div class="btn-group" data-toggle="buttons">
        
            <label class="btn btn-default">
                  <input type="radio" value="B" checked autocomplete="off"> Branco
              </label>
        
            <label class="btn btn-default amarelo">
                  <input type="radio" value="A" autocomplete="off"> Amarelo
              </label>
        
            <label class="btn btn-default laranja">
                  <input type="radio" value="L" autocomplete="off"> Laranja
              </label>
        
            <label class="btn btn-default vermelho">
                  <input type="radio" value="V" autocomplete="off"> Vermelho
              </label>
        
          </div>
        
        </div>
</body>
</html>

6

Talvez só "subir" um pouco o botão selecionado?

.btn.btn-default.active {
    bottom: 3px;
  }

Veja o exemplo completo.

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style>
  .btn.btn-default.active {
    bottom: 3px;
  }
  
  .btn-default.amarelo {
    background: yellow;
  }
  
  .btn-default.amarelo:hover {
    background: rgb(240, 240, 0);
  }
  
  .btn-default.amarelo.active {
    background: rgb(230, 230, 0);
  }
  
  .btn-default.laranja {
    background: orange;
  }
  
  .btn-default.laranja:hover {
    background: rgb(255, 140, 0);
  }
  
  .btn-default.laranja.active {
    background: rgb(255, 125, 0);
  }
  
  .btn-default.vermelho {
    background: red;
  }
  
  .btn-default.vermelho:hover {
    background: rgb(240, 0, 0);
  }
  
  .btn-default.vermelho.active {
    background: rgb(230, 0, 0);
  }
</style>

<body>
  <h1>
    Nível de gravidade
  </h1>
  <div class="form-group">

    <div class="btn-group" data-toggle="buttons">

      <label class="btn btn-default active">
                  <input type="radio" value="B" checked autocomplete="off"> Branco
              </label>

      <label class="btn btn-default amarelo">
                  <input type="radio" value="A" autocomplete="off"> Amarelo
              </label>

      <label class="btn btn-default laranja">
                  <input type="radio" value="L" autocomplete="off"> Laranja
              </label>

      <label class="btn btn-default vermelho">
                  <input type="radio" value="V" autocomplete="off"> Vermelho
              </label>

    </div>

  </div>
</body>

</html>

1
  • Ideia legal mano +1 Commented 6/12/2017 às 19:26
3

Uma sombra pulsando é uma boa forma de chamar a atenção:

.btn-default.amarelo{
    background: yellow;
}
.btn-default.amarelo:hover{
    background: rgb(240, 240, 0);
}
.btn-default.amarelo.active{
    background: rgb(230, 230, 0) !important;
}
.btn-default.laranja{
    background: orange;
}
.btn-default.laranja:hover{
    background: rgb(255, 140, 0);
}
.btn-default.laranja.active{
    background: rgb(255, 125, 0) !important;
}
.btn-default.vermelho{
    background: red;
}
.btn-default.vermelho:hover{
    background: rgb(240, 0, 0);
}
.btn-default.vermelho.active{
    background: rgb(230, 0, 0) !important;
}
.btn-default.active{
   animation:efeito .5s infinite linear;
   background: #eee !important;
}

@keyframes efeito {
    0% { box-shadow: 0 0 25px green; }
    50% { box-shadow: none; }
    100% { box-shadow: 0 0 25px green; }
}

@-webkit-keyframes efeito {
    0% { box-shadow: 0 0 25px green; }
    50% { box-shadow: 0 0 0; }
    100% { box-shadow: 0 0 25px green; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<h1>
 Nível de gravidade
</h1>
<div class="form-group">

 <div class="btn-group" data-toggle="buttons">

   <label class="btn btn-default active">
         <input type="radio" value="B" checked autocomplete="off"> Branco
     </label>

   <label class="btn btn-default amarelo">
         <input type="radio" value="A" autocomplete="off"> Amarelo
     </label>

   <label class="btn btn-default laranja">
         <input type="radio" value="L" autocomplete="off"> Laranja
     </label>

   <label class="btn btn-default vermelho">
         <input type="radio" value="V" autocomplete="off"> Vermelho
     </label>

 </div>

</div>

Ou quem sabe, pulando:

.btn-default.amarelo{
    background: yellow;
}
.btn-default.amarelo:hover{
    background: rgb(240, 240, 0);
}
.btn-default.amarelo.active{
    background: rgb(230, 230, 0) !important;
}
.btn-default.laranja{
    background: orange;
}
.btn-default.laranja:hover{
    background: rgb(255, 140, 0);
}
.btn-default.laranja.active{
    background: rgb(255, 125, 0) !important;
}
.btn-default.vermelho{
    background: red;
}
.btn-default.vermelho:hover{
    background: rgb(240, 0, 0);
}
.btn-default.vermelho.active{
    background: rgb(230, 0, 0) !important;
}
.btn.active{
   animation:efeito .5s infinite linear;
   background: #eee !important;
}

@keyframes efeito {
    0% { top: -5px; }
    50% { top: 0; }
    100% { top: -5px; }
}

@-webkit-keyframes efeito {
    0% { top: -5px; }
    50% { top: 0; }
    100% { top: -5px; }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<h1>
 Nível de gravidade
</h1>
<div class="form-group">

 <div class="btn-group" data-toggle="buttons">

   <label class="btn btn-default active">
         <input type="radio" value="B" checked autocomplete="off"> Branco
     </label>

   <label class="btn btn-default amarelo">
         <input type="radio" value="A" autocomplete="off"> Amarelo
     </label>

   <label class="btn btn-default laranja">
         <input type="radio" value="L" autocomplete="off"> Laranja
     </label>

   <label class="btn btn-default vermelho">
         <input type="radio" value="V" autocomplete="off"> Vermelho
     </label>

 </div>

</div>

1
  • A ideia é interessante, mas animações contínuas pra indicar estado podem se tornar cansativas. Commented 7/12/2017 às 11:36

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 .