Home / Questions / 536846
Accepted
ZCH
Asked: 2022-07-27 14:49:16 +0800 CST 2022-07-27 14:49:16 +0800 CST

Is it possible to change the color of a checkbox and a radio button with Materialiaze styles?

  • 772

I want to change the color of a radio button and a checkbox that have Materialize css styles. I want to change the green color to another color. I add the code:

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

This is the result: green checkbox radio button green

html

1 Answers

  1. Best Answer

    For this you must take into account:

    1. The styles materializeshould go at the top between the tags<head></head>
    2. You must create a custom style sheet in your project
    3. Use the declaration !importantat the end of each property to give more specificity to the modified styles

    The styles for each case are commented.

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

    • 1