Skip to main content
3 de 4
Ajuste no código, correções ortográficas e adição de tag inerente à pergunta
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Como eu poderia destacar o radio button que está selecionado?

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.

gato
  • 23,7mil
  • 33
  • 125
  • 255