3

Possuo esses radio buttons no qual serve para especificar o nível de gravidade de uma determinada ocorrência. E eu gostaria de saber como eu poderia mudar a cor deles?

Segue este exemplo de ilustração:

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

As cores que eu gostaria de colocar são:

branco, amarelo, laranja e vermelho

Cada cor correspondente ao seu radio button.

3
  • Pode colocar background-color: red ! Important; pois irá substituir os padrões do bootstrap Commented 3/12/2017 às 19:16
  • Downvoter alguma melhoria ou sugestão que você gostaria de acrescentar na pergunta?
    – gato
    Commented 3/12/2017 às 19:40
  • não, senão o teria feito. Commented 3/12/2017 às 20:45

2 Respostas 2

2

Jovem vc precisa trabalhar com a class .btn-default. Repare que o seu novo CSS tem que vir após o CSS original do Bootstrap, assim o DOM vai ler primeio o BS e depois vai fazer um override com a classe nova customizada. Se tiver alguma dúvida pode falar.

<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

No seu caso poderia usar o proprio btn do Bootstrap, porém não teria todos, ou mesmo personalizar usando 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>

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

Ou usar o 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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .