html漂亮的单选框,纯css3实现漂亮的单选按钮radio

单选按钮radio是表单常见的元素，但是默认的单选按钮radio样式呆板不好看，因此通常设计人员会自己设计一个单选按钮radio，本文介绍用纯css3实现漂亮的单选按钮radio。

纯css3实现漂亮的单选按钮radio

CSS代码

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Lato', sans-serif;

}

html,body{

display: grid;

height: 100%;

place-items: center;

background: #8f8f8f;

font-family: 'Lato', sans-serif;

}

.wrapper{

display: inline-flex;

background: #fff;

height: 80px;            /* 按钮盒子高度 */

width: 250px;            /* 按钮盒子宽度 */

align-items: center;

justify-content: space-evenly;

border-radius: 5px;

padding: 20px 15px;

box-shadow: 5px 5px 30px rgba(0,0,0,0.2);

}

.wrapper .option{

background: #fff;

height: 100%;

width: 100%;

display: flex;

align-items: center;

justify-content: space-evenly;

margin: 0 10px;

border-radius: 5px;

cursor: pointer;

padding: 0 10px;

border: 2px solid lightgrey;

transition: all 0.3s ease;

}

.wrapper .option .dot{

height: 12px;