IOS与安卓关于select样式兼容性问题

看到这些问题脑袋疼

于 2020-03-26 22:30:15 发布

阅读量678

点赞数 1

CC 4.0 BY-SA版权

文章标签： html css ios css3 less

本文链接：https://blog.youkuaiyun.com/helloword_js/article/details/105130000

本文详细介绍了如何解决IOS和安卓系统中Select元素的显示差异问题，通过使用CSS的-webkit-appearance属性清除默认样式，再自定义下拉箭头样式，实现跨平台一致的用户体验。

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

让我们先来看看IOS和安卓的区别

造成这样的原因是IOS有自己的默认样式
所以我们在兼容的时候首先清除默认的样式

-webkit-appearance: none;

然后select的边框已经倒三角样式都会被清除
所以我们需要自己绘制倒三角添加border

.slectIos1{
	width: 0;
	height: 0;
	border-top: 1rem solid black;
	border-left: .3rem solid transparent;
	border-right: .3rem solid transparent;
	border-bottom: 0rem solid transparent;
	position: absolute;
	bottom: 10.7rem;
	right: 1rem;
}

input,select{
	-webkit-appearance: none;
	display: block;
	width: 25rem;
	text-align: center;
	padding: 1.2rem;
	margin-bottom: .6rem;
	box-sizing: border-box;
	outline: none;
	border: 1px solid black;
	border-radius: .6rem;
	/* ios兼容 */
}

这样就兼容啦