Sometimes we need to use a beautiful bit of the radio button, then, we must abandon the original to write, the following is what I realized
<div class= "Radio" ><span class= "Yuan rdactive" ><span></span></span> you ugly you first </div> <div class= "Radio" ><span class= "Yuan" ><span></span></span> You're ugly you first </div><div class= "Radio" ><span class= "Yuan" ><span></span></span> you are more ugly you first </div>
. Radio{display:flex;align-items:center;width:100px;cursor:pointer;}. yuan{/* Big circle */display:block;width:10px;height:10px;border-radius:50%;background: #ececec;/* Write your favorite color */display here: flex;align-items:center;margin-right:5px;}. Radio>span.rdactive{background: #EF6121; * * Here Write your favorite color */}.yuan span{/* Small Circle */display:block;width:4px;height:4px; border-radius:50%;background:white;/* here to write your favorite color */margin:0 auto;}
$ (". Radio"). Children ('. Yuan '). On (' click ', Function () {$ ('. Rdactive '). Removeclass (' rdactive '); $ (this). AddClass (" Rdactive "). Siblings (). Removeclass (" rdactive ");})
:
Okay, that's it for you.
Handwriting CSS+JS implement Radio radio button