Skip to main content
Commonmark migration
Fonte Link

#Perguntas

Perguntas

#Perguntas

Perguntas

Tweeted twitter.com/StackOverflowPT/status/938729853880324096
Ajuste no código, correções ortográficas e adição de tag inerente à pergunta
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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

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

<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.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 correscores e em seguida removo o foco do radio buttonradio button, o radio buttonradio button que estaestá 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.

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

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

Como eu poderia destacar o radio button que esta 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.

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

Repare que quando eu seleciono uma das opções de corres e em seguida removo o foco do radio button, o radio button que esta 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.

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

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

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.

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

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

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

adicionou 119 caracteres ao conteúdo
Fonte Link
gato
  • 23,7mil
  • 33
  • 125
  • 255

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

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

Fonte Link
gato
  • 23,7mil
  • 33
  • 125
  • 255
Carregando