Styling radio button

Styling radio

1<input type='radio' id='desktop-product' name='product' value='desktop'>
2<label for='desktop-product'>Desktop</label>
3<br>
4<input type='radio' id='mobile-product' name='product' value='mobile'>
5<label for='mobile-product'>Mobile</label>
 1input[type='radio'] {
 2  display: none;
 3
 4  &+label{
 5    display: block;
 6    font-size: 1rem;  
 7    padding: 1rem .5rem;
 8    padding-left: 3rem;
 9    border: 1px solid transparent;
10  }
11  &:checked+label {
12    border-color:YELLOWGREEN;
13    background-color: lighten(YELLOWGREEN, 49%);
14    background-image: url(tick.png)
15    background-position: 16px 50%;
16    background-repeat: no-repeat;
17  }
18}

See the Pen An example of styling raido/check input for mobile device by Thomas Seng Hin Mak (@makzan) on CodePen.

What’s next? We’re going to take a look at “Styling input range”.

overlaied image when clicked on thumbnail

Makzan | Mobile web design | Table of Content