Skip to main content
se añadieron 6 caracteres en el cuerpo
Origen Enlace
Levi Arista
  • 2.8k
  • 2
  • 14
  • 27

Un checkbox no tiene la propiedad background-color de por sí, pero podrías usar este snippet para llegar a lograr lo que deseas. Espero te sirva.

.checkbox {
  margin: 0 0 1em 2em;
}
.checkbox .tag {
  color: #595959;
  display: block;
  float: left;
  font-weight: bold;
  position: relative;
  width: 120px;
}
.checkbox label {
  display: inline;
}
.checkbox .input-assumpte {
  display: none;
}
.input-assumpte + label:after {
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  display: inline-block;
  transition-duration: 0.3s;
  width: 16px;
  height: 16px;
  content: '';
  margin-left: 10px;
}
.input-assumpte:checked + label:after {
  background-color: #595959;
}
<div class="checkbox">
  <input type="checkbox" class="input-assumpte" id="input-confidencial" />
  <label for="input-confidencial">Opción</label>
</div>

Un checkbox no la propiedad background-color de por sí, pero podrías usar este snippet para llegar a lograr lo que deseas. Espero te sirva.

.checkbox {
  margin: 0 0 1em 2em;
}
.checkbox .tag {
  color: #595959;
  display: block;
  float: left;
  font-weight: bold;
  position: relative;
  width: 120px;
}
.checkbox label {
  display: inline;
}
.checkbox .input-assumpte {
  display: none;
}
.input-assumpte + label:after {
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  display: inline-block;
  transition-duration: 0.3s;
  width: 16px;
  height: 16px;
  content: '';
  margin-left: 10px;
}
.input-assumpte:checked + label:after {
  background-color: #595959;
}
<div class="checkbox">
  <input type="checkbox" class="input-assumpte" id="input-confidencial" />
  <label for="input-confidencial">Opción</label>
</div>

Un checkbox no tiene la propiedad background-color de por sí, pero podrías usar este snippet para llegar a lograr lo que deseas. Espero te sirva.

.checkbox {
  margin: 0 0 1em 2em;
}
.checkbox .tag {
  color: #595959;
  display: block;
  float: left;
  font-weight: bold;
  position: relative;
  width: 120px;
}
.checkbox label {
  display: inline;
}
.checkbox .input-assumpte {
  display: none;
}
.input-assumpte + label:after {
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  display: inline-block;
  transition-duration: 0.3s;
  width: 16px;
  height: 16px;
  content: '';
  margin-left: 10px;
}
.input-assumpte:checked + label:after {
  background-color: #595959;
}
<div class="checkbox">
  <input type="checkbox" class="input-assumpte" id="input-confidencial" />
  <label for="input-confidencial">Opción</label>
</div>

se añadieron 400 caracteres en el cuerpo
Origen Enlace
Levi Arista
  • 2.8k
  • 2
  • 14
  • 27

Un checkbox no la propiedad background-color de por sí, lo quepero podrías hacer es ajustar el checkboxusar este snippet para llegar a un div lograr lo que tenga el color de fondodeseas. Espero te sirva.

    .myCheckbox input:checked {
      background-color: #2196F3;
    }
    
    .div-fondo {
      margin-top: 5px;
      background-color: #2196F3;
      padding: 5px;
      color: white;
    }
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="div-fondo">
    <label class="myCheckbox">
    <input class="checkbox" type="checkbox">
    </label>
    <span class="id">Opción</span>
  <div>
</body>

</html>
.checkbox {
  margin: 0 0 1em 2em;
}
.checkbox .tag {
  color: #595959;
  display: block;
  float: left;
  font-weight: bold;
  position: relative;
  width: 120px;
}
.checkbox label {
  display: inline;
}
.checkbox .input-assumpte {
  display: none;
}
.input-assumpte + label:after {
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  display: inline-block;
  transition-duration: 0.3s;
  width: 16px;
  height: 16px;
  content: '';
  margin-left: 10px;
}
.input-assumpte:checked + label:after {
  background-color: #595959;
}
<div class="checkbox">
  <input type="checkbox" class="input-assumpte" id="input-confidencial" />
  <label for="input-confidencial">Opción</label>
</div>

Un checkbox no la propiedad background-color, lo que podrías hacer es ajustar el checkbox a un div que tenga el color de fondo.

    .myCheckbox input:checked {
      background-color: #2196F3;
    }
    
    .div-fondo {
      margin-top: 5px;
      background-color: #2196F3;
      padding: 5px;
      color: white;
    }
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="div-fondo">
    <label class="myCheckbox">
    <input class="checkbox" type="checkbox">
    </label>
    <span class="id">Opción</span>
  <div>
</body>

</html>

Un checkbox no la propiedad background-color de por sí, pero podrías usar este snippet para llegar a lograr lo que deseas. Espero te sirva.

.checkbox {
  margin: 0 0 1em 2em;
}
.checkbox .tag {
  color: #595959;
  display: block;
  float: left;
  font-weight: bold;
  position: relative;
  width: 120px;
}
.checkbox label {
  display: inline;
}
.checkbox .input-assumpte {
  display: none;
}
.input-assumpte + label:after {
  background-color: #fafafa;
  border: 1px solid #cacece;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
  display: inline-block;
  transition-duration: 0.3s;
  width: 16px;
  height: 16px;
  content: '';
  margin-left: 10px;
}
.input-assumpte:checked + label:after {
  background-color: #595959;
}
<div class="checkbox">
  <input type="checkbox" class="input-assumpte" id="input-confidencial" />
  <label for="input-confidencial">Opción</label>
</div>

Origen Enlace
Levi Arista
  • 2.8k
  • 2
  • 14
  • 27

Un checkbox no la propiedad background-color, lo que podrías hacer es ajustar el checkbox a un div que tenga el color de fondo.

    .myCheckbox input:checked {
      background-color: #2196F3;
    }
    
    .div-fondo {
      margin-top: 5px;
      background-color: #2196F3;
      padding: 5px;
      color: white;
    }
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div class="div-fondo">
    <label class="myCheckbox">
    <input class="checkbox" type="checkbox">
    </label>
    <span class="id">Opción</span>
  <div>
</body>

</html>