css去除webkit内核的默认样式

最新推荐文章于 2021-08-03 17:51:05 发布

转载最新推荐文章于 2021-08-03 17:51:05 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tonyTao/p/5430453.html

本文介绍如何使用CSS属性-webkit-appearance:none去除iPhone等移动端设备上按钮和select元素的默认样式，实现自定义UI设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做移动端的朋友应该知道，iphone的默认按钮是个很恶心的圆角，select下拉框也有默认样式无法修改。

这时候可以用到

-webkit-appearance:none //去除默认样

　　在按钮和select样式里加入上面css，效果如下图。

css代码如下：

input{
	background:#FF9933;
	border-radius:5px;
	color:#fff;
	padding:3px 20px;
	-webkit-appearance:none;
}
select{
	background:url(images/img1.jpg) no-repeat;
	background-size:20px;
	background-position:95% center;
	padding:3px 10px;
	width:30%;
	-webkit-appearance:none;
}

转载于:https://www.cnblogs.com/tonyTao/p/5430453.html