css怎么自定义radio单选框样式

今天小编给大家分享一下css怎么自定义radio单选框样式的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

融水网站制作公司哪家好,找成都创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作,到程序开发,运营维护。成都创新互联从2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选成都创新互联

自定义radio单选框样式的方法:

html部分

LOVE

YOUARENICE

css样式部分

.radio{

width:260px;

height:26px;

line-height:26px;

margin:200pxauto;

background-color:#ddeef1;

font-size:16px;

color:#495060;

text-align:center;

}

label:first-child{

margin-right:40px;

}

labelinput,.radio_on{

display:none;

}

.pos{

display:inline;

vertical-align:middle;

}

.radio_bg{

position:relative;

display:inline-block;

height:14px;

width:14px;

border:1pxsolid#B3B4B8;

border-radius:50%;

}

label:hover.radio_bg,labelinput:checked+span.posspan.radio_bg{

border:1pxsolid#27B28B;

}

labelinput:checked+span.posspan.radio_bg.radio_on{

display:inline-block;

position:absolute;

top:2px;

left:2px;

width:10px;

height:10px;

border-radius:50%;

background-color:#27B28B;

}

以上就是“css怎么自定义radio单选框样式”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


标题名称:css怎么自定义radio单选框样式
链接URL:http://pwwzsj.com/article/gpside.html

其他资讯