How can I highlight the radio button that is selected?

Question

How can I highlight the radio button that is selected?

Navigation

#1 by (12 votes)
#2 by (9 votes)
#3 by (8 votes)
#4 by (7 votes)
#5 by (7 votes)
#6 by (5 votes)

8

I have this radio group in which it is used to specify the severity level of a certain occurrence, using the colors to classify the level.

See:

<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><scriptsrc="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>

Notice that when I select one of the color options and then remove the focus from radio button , the radio button that is selected is almost imperceptible, it appears that it is not selected. This could confuse the user, leading him to believe that he did not select the right option.

Questions

How could I make sure% s of selected% is stand out from the rest?
Could there be a visual effect on the selected option?

I believe that this way the user would not get confused about this.

PS: The selected% color can not have its color changed because it has a purpose.

html css ux radiobutton

asked by anonymous 06.12.2017 / 19:30

6 answers

9

What do you think of this idea?

When the .active class is added, a Glyphicons icon (default Bootstrap ) is added to the button via the% .

.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><scripttype="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><div><h1>Níveldegravidade</h1><divclass="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>

06.12.2017 / 20:02

8

Here is a suggestion to highlight the selected option.

I added a background to the text and made it switch according to the selected severity:

CSS added:

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

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

JS added:

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

Example:

$(".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><linkrel="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><scriptsrc="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>

06.12.2017 / 20:02

7

Each time a button is clicked, an .active class is added to it, so a specific style can be created for that class. Following the button focus pattern can be added for example a box-shadow on it when it is selected

<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><scriptsrc="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>

06.12.2017 / 19:55

7

Maybe just "raise" the selected button a little?

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

See the full example.

<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><scriptsrc="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>

06.12.2017 / 20:03

5

A pulsing shadow is a good way to get attention:

.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><linkrel="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>

Or who knows, jumping:

.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><linkrel="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>

06.12.2017 / 20:11

Convert RTSP stream to HTTP Live Stream Receive json data in PHP

score 12 · Accepted Answer

Use an :: after element for example, see

<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><scriptsrc="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>