Customizing the checkbox and radio with the CSS3 selector

before a custom checkbox was needed in a project, the call was simulated and a better approach was found (* Because compatibility issues are used in mobile development.)

Effect:

1 2 3 4 5 6 7

Implementation code:

<style type= "Text/css" > *{padding:0;margin:0;}#text{width:260px;margin:0 0 0 20px;padding:6px;Border:4px Solid #FC9;font-size:12px;Color: White;}#text Label{Display:Inline-block;margin:0 10px 0 0;}#text span{Display:Inline-block;cursor:Pointer;width:24px;Line-height:24px;Border-radius:15px;text-align:Center;background:#ccc;}#text Input{Display:None;}#text label input:checked + span{background:#F96;}</style>

<DivID= "text">    <label>        <inputtype= "Radio"value= "1"name= "Muber" />        <span>1</span>    </label>    <label>        <inputtype= "Radio"value= "2"name= "Muber" />        <span>2</span>    </label>    <label>        <inputtype= "Radio"value= "3"name= "Muber" />        <span>3</span>    </label>    <label>        <inputtype= "Radio"value= "4"name= "Muber" />        <span>4</span>    </label>    <label>        <inputtype= "Radio"value= "5"name= "Muber" />        <span>5</span>    </label>    <label>        <inputtype= "Radio"value= "6"name= "Muber" />        <span>6</span>    </label>    <label>        <inputtype= "Radio"value= "7"name= "Muber" />        <span>7</span>    </label></Div>

Customize the checkbox and radio with the CSS3 selector