Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Dúvida sobre a cor do checkbox

Referente ao curso Bootstrap 5: novos recursos e práticas recomendadas de HTML, CSS e JavaScript

por Andreza Cabral Machado
| 100.8k xp | 22 posts

Boa tarde, não estou conseguindo deixar a bolinha do meio marrom, e tem uma sombra azul que tbm está me incomodando. Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade O css que utilizei foi esse:

body {
  --bege: #E6E0D6;
  --marrom-escuro: #816D4F;
  --marrom-claro: #B29463;
  font-family: 'Barlow', sem serifa;
}

input[type=checkbox]{
  border-color: var(--marrom-claro);
}
input[type=checkbox]:checked{
  background-color: var(--marrom-claro);
  border-color: var(--marrom-claro);
}

input[type="checkbox"]:not(:checked) + label::before,
input[type="radio"]:not(:checked) + label::before {
  background-color: var(--marrom-claro);
  border-color: var(--marrom-claro);
}

Ps. a última parte do css peguei de outra dúvida aqui do fórum, mas não resolveu. Se puder me ajudar agradeço ;)

4 respostas
solução!
por Gabriela Melo
| 64.7k xp | 3 posts
Desenvolvedora de Software

Andreza, tudo bem?

Poderia postar aqui o código do HTML também?!

por Andreza Cabral Machado
| 100.8k xp | 22 posts

Boa tarde, posso sim!!

<header class="cabecalho">
    <nav class=" navbar-expand-lg navbar bg-body-tertiary fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#"><img src="./assets/logo.png" alt="logotipo da cafeteria Serenatto"></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
          aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
          <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasNavbarLabel"><img src="./assets/logo-mobile.png"
                alt="Logotipo da cafeteria Serenatto"></h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body">
            <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">Início</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Sobre</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Contato</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <div class="form-check form-switch">
                    <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
                    <label class="form-check-label" for="flexSwitchCheckDefault">Modo Noturno</label>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>
por Gabriela Melo
| 64.7k xp | 3 posts
Desenvolvedora de Software

Acho que assim resolve:

/* Isso remove a sombra azul e deixa a bolinha na cor marrom em seu estado "inicial"*/

.form-check-input:focus {
  box-shadow:none;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23783c00'/%3e%3c/svg%3e")!important;
}

/* Esse trecho vai sobrescrever o padrão da biblioteca do Bootstrap quando o checkbox estiver ativo... ou seja, esse background-image nada mais do que um SVG que é a bolinha branca dentro desse checkbox (switch toggle).  */

.form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23783c00'/%3e%3c/svg%3e")!important;
}

Existem inúmeras formas de resolver essa questão da cor no checkbox (switch toggle). Esta provavelmente não é a melhor maneira... porém, resolve! O que está dentro de fill='%23783c00' é o código hexadecimal de um marrom que eu peguei na internet... No caso a cor é a partir do 783c00. Se caso eu quisesse deixar a bolinha em outra cor, por exemplo, na cor azul seria: fill='%230008fd'. Importante manter o número "23" dentro do fill e depois inserir o código hexadecimal.

Exemplo do toggle switch com a bolinha na cor azul!

Tem um tutorial bem legal no W3Schools que sempre me salva. Este aqui explica como criar esse switch toggle de uma maneira mais simples e sem o Bootstrap: https://www.w3schools.com/howto/howto_css_switch.asp

Espero ter ajudado!

Abraços!

por Andreza Cabral Machado
| 100.8k xp | 22 posts

Obrigada pela ajuda! Abs