修改单选框,多选框,下拉框的默认样式

本文介绍了如何使用CSS来修改HTML中的单选框、多选框和下拉框的默认样式。通过设置display属性为none隐藏原始元素,然后使用伪元素before添加自定义样式。例如,对于单选框,创建了一个圆圈边框,选中时改变颜色或应用背景图片;对于多选框,同样方法创建方块并调整选中后的背景;对于下拉框,调整了整体样式并添加了自定义下拉箭头图标。
摘要由CSDN通过智能技术生成

修改单选框的默认样式

html

<input type="radio" name="sh" id="yes" value="2"  checked="checked" />
<label class="radLabel" for="yes"></label>

<input type="radio" name='sh' id="no" value="3" />
<label class="radLabel" for="no"></label>

CSS样式

input[type="radio"]{
    display: none;
}
input[type="radio"]+label:before {
    display: inline-block;
    content: "";
    width: 10px;
    height: 10px;
    bord

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值