Materialize: change color radio input

Created on 11 Jun 2015 · 6Comments · Source: Dogfalo/materialize

Hey! i wanna know if it's possible change the color of input radio whit external css file. or how know with sass downloading materialize which variable change

thanks for the help

Source

Artessan

Most helpful comment

[type="radio"].with-gap:checked + label:before {
border-radius: 50%;
border: 2px solid #0277bd; }

[type="radio"].with-gap:checked + label:after {
border-radius: 50%;
border: 2px solid #0277bd;
background-color: #0277bd;
z-index: 0;
-webkit-transform: scale(.5);
-moz-transform: scale(.5);
-ms-transform: scale(.5);
-o-transform: scale(.5);
transform: scale(.5); }

Artessan on 27 Jul 2015

👍2

All 6 comments

hey! I already solved!
Thanks anyway!

Artessan on 11 Jun 2015

What did you do? I cannot find a reliable way to switch checkbox colors.

adenta on 26 Jul 2015

[type="radio"].with-gap:checked + label:before {
border-radius: 50%;
border: 2px solid #0277bd; }

Artessan on 27 Jul 2015

👍2

type="radio".with-gap:checked+label:before,
type="radio".with-gap:checked+label:after {
border: 2px solid black !important;
}

type="radio".with-gap:checked+label:after {
background-color: #424242 !important;
}

ronnieroyston on 25 Sep 2016

If you're using Less, you could use this mixin:

.radio-color(@border-color, @background-color: @border-color, @border-color-checked: @border-color) {
    [type="radio"].with-gap {
        &+label:before,
        &+label:after {
            border: 2px solid @border-color !important;
        }
        &:checked+label:before,
        &:checked+label:after {
            border: 2px solid @border-color-checked !important;
        }
        &:checked+label:after {
            background-color: @background-color !important;
        }
    }
}