0

Quiero cambiar el color de un radio button y un checkbox que tienen estilos de Materialize css. Quiero cambiar el color verde a otro color. Agrego el código:

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    
    <label>
         <input type="checkbox" />
         <span>Red</span>
    </label>
     <label>
        <input name="group1" type="radio" checked />
        <span>Red</span>
    </label>
    
         <!-- Compiled and minified CSS -->
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

         <!-- Compiled and minified JavaScript -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  </body>
</html>

Este es el resultado: checkbox verde radio button verde

1 respuesta 1

1

Para ello debes tener en cuenta:

  1. Los estilos de materialize deben ir en la parte superior entre las etiquetas <head></head>
  2. Debes crear una hoja de estilos personalizada en tu proyecto
  3. Usar la declaración !important al final de cada propiedad para dar mayor especificidad a los estilos modificados

Los estilos para cada caso están comentados.

/*Para el checkbox*/
[type="checkbox"]:checked+span:not(.lever):before {
    border-right: 2px solid #a30000 !important;
    border-bottom: 2px solid #a30000 !important;
}

/*Para el radio button*/
[type="radio"]:checked+span:after, 
[type="radio"].with-gap:checked+span:before, 
[type="radio"].with-gap:checked+span:after {
    border: 2px solid #a30000 !important;
    background-color: #a30000 !important;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <title></title>
</head>
<body>
  <label>
    <input type="checkbox" id="check"/>
    <span>Red</span>
  </label>
  <label>
    <input name="group1" type="radio" checked />
    <span>Red</span>
  </label>
  <label>
    <input name="group2" type="radio" />
    <span>Red2</span>
  </label>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

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.