h5 编辑单选框的样式

2019/08/23 19:29
阅读数 6

radio单选框样式设置

input[type=radio] {

    display: inline-block;

    vertical-align: middle;

    width: 20px;

    height: 20px;

    -webkit-appearance: none;

    background-color: transparent;

    border: 0;

    outline: 0 !important;

    line-height: 20px;

    color: #d8d8d8;

}

input[type=radio]:after {

    content: "";

    display:block;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    text-align: center;

    line-height: 14px;

    font-size: 16px;

    color: #fff;

    border: 3px solid #ddd;

    background-color: #fff;

    box-sizing:border-box;

}

input[type=radio]:checked:after {

    content: "L";

    transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);

    -webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);

    border-color: #099414;

    background-color: #099414;

}

菜鸟任小
展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部