1

Con la propiedad accent-color se puede cambiar el color de los checkbox, radio, etc... pero me he encontrado que lo modifica el color del fondo, mientras que en el caso del check lo pone en negro o blanco en función del color del fondo que se elija en la propiedad accent-color, modificándolo en función de su legibilidad. ¿Sabéis si es posible modificar ese check con alguna propiedad del estilo de accent-color?

<label><input style="accent-color:yellow" type="checkbox" checked/>Checkbox con fondo claro y check oscuro</label><br>
<label><input style="accent-color:darkred" type="checkbox" checked/>Checkbox con fondo oscuro y check claro</label>

1
  • Efectivamente como te dicen en la respuesta, lo mejor es que crees uno personalizado, así puedes cambiar todo lo que necesitas
    – ayaleil
    Commented el 20 may. 2022 a las 20:21

1 respuesta 1

0

Podrias intentar creando uno personalizado usando CSS

.custom-checkbox {
  display: none;
}

.custom-checkbox + label {
  font-weight: normal;
  cursor: pointer;
}

.custom-checkbox + label span {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
  width: 24px;
  height: 24px;
  cursor: pointer;
  position: relative;
  border: 1px solid #EAECEF;
  background-color: #ffffff;
  border-radius: 3px;
  font-weight: 500;
}

.custom-checkbox + label span::before {
  content: "";
  opacity: 0;
  width: 12px;
  height: 12px;
  background-color: #000000;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s;
  border-radius: 2px;
}

.custom-checkbox:checked + label span::before {
  opacity: 1;
}

.custom-checkbox:disabled + label {
  opacity: 0.5;
  cursor: default;
}

.custom-checkbox:disabled + label span {
  cursor: default;
}
<div>
  <input class="custom-checkbox" type="checkbox" id="chkbx_1" value="1">
  <label for="chkbx_1">
    <span></span> Lorem ipsum dolor sit amet
  </label>
</div>

1
  • Gracias, esa era la solución que habíamos pensado, pero antes queríamos saber si existía la posibilidad de hacerlo solo con css. Gracias! Commented el 21 may. 2022 a las 18:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.