简单重写类型为radio的input元素样式

本文介绍了如何重写input元素中radio类型的样式,以达到统一不同浏览器的显示效果。通过使用`-webkit-appearance:none;`关闭浏览器默认样式,然后利用CSS创建选中前后的圆环效果。虽然存在与原生样式的一些差距,但可以实现基本的点击效果。
摘要由CSDN通过智能技术生成

简直菜得扣脚

浏览器自己有一些诸如滚动条,文本框,输入框的特有样式,如果直接使用会根据不同浏览器造成不同的显示效果,所以会重写这些样式是很有必要的。

input元素

radio类型

很容易理解有选中前的样式和选中后的样式,选中前的样式很好选择,选中后的样式可以用:check这个伪类选择器选中。(多浏览器支持我还没完全掌握,目前只用webkit内核浏览器来说)
然后先用-webkit-appearance:none;关闭浏览器自带样式,然后要做成选中前是一个空心圆,选中后是一个中间有个实心点的圆。(可以理解为在谷歌浏览器上自带的radio样式)
空心圆可以使用圆角+背景色+阴影来表示:

<代入你的选择器>{
    -webkit-appearance:none;
    height: 13px;
    width: 13
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值