表单单选多选项清除默认样式小技巧

本文介绍了一种清除HTML表单中单选和多选框默认样式的CSS技巧,并展示了如何通过自定义样式来改善用户体验。

工作中做项目都会遇到表单 单选、多选项的样式问题,对于一个刚入行的菜鸟来说,可能不知道如何修改很low的选项默认样式,下表给初学者提供了改变默认样式的小技巧

首先要清除默认样式,非常简单的css:

  

input{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-appearance:none;font-size:1em;line-height:1.5em;list-style:none;}
input{outline:none;border:none;background:none;}

简单两行代码input-radio/chackbox的默认样式都会清除掉,接下来用css来控制选中和非选中状态的样式

#wrapper input[type="radio"]:checked{
    background:url("img/icon_gx.png") no-repeat center;
    border:none;
}

这里input的大小和宽高设置省略,相信即使菜鸟,这些都不是问题,下边请看修改后的样式

是否比默认样式好看不少呢,本demo提供给初学者!

转载于:https://www.cnblogs.com/xiaomingge/p/6502027.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值