IOS與安卓關于select樣式相容性問題

讓我們先來看看IOS和安卓的差別

造成這樣的原因是IOS有自己的預設樣式

是以我們在相容的時候首先清除預設的樣式

然後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相容 */
}
           

這樣就相容啦