h5 radio单选框样式设置

Posted 任小超

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了h5 radio单选框样式设置相关的知识,希望对你有一定的参考价值。

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;

}

以上是关于h5 radio单选框样式设置的主要内容,如果未能解决你的问题,请参考以下文章

elementUI单选框按钮样式

thinkphp中怎样获取radio单选框的值(单选框较多)

使用纯css3自定义单选框radio和复选框checkbox

bootstrap学习总结-05 常用标签3

PHP中怎样获取radio单选框的值

关于小程序radio单选框单击打勾再击取消