How to change the color of a radio button?

Asked

Viewed 2,956 times

3

I have these radio Buttons in which it serves to specify the level of severity of a given occurrence. And I’d like to know how I could change their color?

Follow this illustration example:

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

<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’d like to put on are:

white, yellow, orange and red

Each color corresponding to your radio button.

html bootstrap-3 radiobutton

  • You can put background-color: red ! Important; as it will replace bootstrap patterns

  • Downvoter any improvement or suggestion you would like to add in the question?

  • Otherwise I would have done it.

2 answers

2


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

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

2

In your case you could use the btn own Bootstrap, but not all, or even customize using inline 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>

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

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

Browser other questions tagged html bootstrap-3 radiobutton

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