How could I highlight the radio button that is selected?

Question

How could I highlight the radio button that is selected?

Asked 6 years, 11 months ago

Viewed 1,015 times

7

I own this radio group which serves to specify the severity level of a given occurrence, using the colors to classify the level.

Behold:

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

Note that when I select one of the color options and then remove the focus from radio button, the radio button that he is selected is almost imperceptible, seeming that he is not selected. This may confuse the user, leading him to believe that he did not correctly select the desired option.

Questions

How could I make the radio button selected if stand out among the others?
There could be a visual effect on the selected option?

I believe that in this way the user would not get confused in question of this.

PS: The radio button that is selected can not have its color changed, because it has a purpose.

6 answers

11

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

White is not appearing in white xD

– Randrade

2017/12/06 at 19:05
@Randrade already put it away, now it’s all right ;)

– hugocsl

2017/12/06 at 19:13

Browser other questions tagged html css radiobutton ux

You are not signed in. Login or sign up in order to post.

by user98628 · Answer 1 · 2017-12-06T19:02:10+00:00

What do you think of this idea?

When the class .active is added, an icon of Glyphicons (pattern of Bootstrap) is inserted to the button through the selector ::after of 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>

by Caique Romero • **7,039** points · Answer 2 · 2017-12-06T19:02:31+00:00

Here is a suggestion to highlight the selected option.

I added a background to the text and made it alternate according to the selected gravity:

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>

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

by Gabriel Schmidt Cordeiro • **728** points · Answer 3 · 2017-12-06T18:55:35+00:00

Each time a button is clicked, a class . active is added to it, so a specific style can be created for that class. Following the default Focus button 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>
        
        <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>

by Randrade • **21,612** points · Answer 4 · 2017-12-06T19:03:14+00:00

Maybe just "up" 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>

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

by Sam • **79,597** points · Answer 5 · 2017-12-06T19:11:20+00:00

A pulsating 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>
<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>

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