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

让我们先来看看IOS和安卓的区别造成这样的原因是IOS有自己的默认样式所以我们在兼容的时候首先清除默认的样式-webkit-appearance: none;然后select的边框已经倒三角样式都会被清除所以我们需要自己绘制倒三角添加border.slectIos1{width: 0;height: 0;border-top: 1rem solid black;...

看到这些问题脑袋疼

636人浏览 · 2020-03-26 22:30:15

看到这些问题脑袋疼 · 2020-03-26 22:30:15 发布

让我们先来看看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兼容 */
}