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: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-html --> <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> <!-- end snippet --> 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. #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. <sup>PS: O radio button que estiver selecionado não pode ter sua cor alterada, porque ela tem uma finalidade.</sup>