How to change the color of a radio button?

Navigation
3

I have these radio buttons in which it is used to specify the severity level of a given occurrence. And I wonder how I could change their color?

Here is an example of this: 

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

<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">
          <input type="radio" value="A" autocomplete="off"> Amarelo
      </label>

    <label class="btn btn-default">
          <input type="radio" value="L" autocomplete="off"> Laranja
      </label>

    <label class="btn btn-default">
          <input type="radio" value="V" autocomplete="off"> Vermelho
      </label>

  </div>

</div>

The colors I would like to put are:

  

white, yellow, orange and red

Each color corresponding to your radio button.

    
asked by anonymous 03.12.2017 / 19:40

2 answers

2

Young you need to work with class .btn-default . Notice that your new CSS has to come after the original CSS of Bootstrap, so the DOM will read the first and the BS will then make an override with the new custom class. If you have any questions, you can speak. 

<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.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>
    
03.12.2017 / 20:14
2

In your case you could use the Bootstrap btn, but you would not have everyone, or even customize using css inline 

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

<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" style="background-color: yellow; color: white">
          <input type="radio" value="A" autocomplete="off" > Amarelo
      </label>

    <label class="btn btn-warning">
          <input type="radio" value="L" autocomplete="off"> Laranja
      </label>

    <label class="btn btn-danger">
          <input type="radio" value="V" autocomplete="off"> Vermelho
      </label>

  </div>

</div>

Or use css 

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

<h1>
  Nível de gravidade
</h1>
<div class="form-group">

  <div class="btn-group" data-toggle="buttons">

    <label class="btn btn-default active branco" >
          <input type="radio" value="B" checked autocomplete="off"> Branco
      </label>

    <label class="btn btn-default amarelo" style="background: yellow">
          <input type="radio" value="A" autocomplete="off"> Amarelo
      </label>

    <label class="btn btn-default laranja" style="background: orange">
          <input type="radio" value="L" autocomplete="off"> Laranja
      </label>

    <label class="btn btn-default vermelho" style="background: red">
          <input type="radio" value="V" autocomplete="off"> Vermelho
      </label>

  </div>

</div>

inline

    
03.12.2017 / 20:16
Handle messages PHP native errors / alerts How to invert the order of the labels in a bar graph stacked with ggplot2?