ios/safari/iPhone 上的样式 HTML 选择标签

Question

我有三个下拉列表（三个 <select> 元素）。我用 css 为它们设置样式：

.dropdown{
    font-size: 20px;
    background: white;
    border:none;
    position: relative;
}

在 chrome 中，它们看起来非常好。但是，当我在 Safari 上的 iPhone 6s (ios 10.2.1) 上测试该网站时，结果有点不同，如图所示：

如您所见，background 中有 gradient，在箭头附近，background 是 black。

如何设置 <select> 元素的样式，以便在 ios 上也有背景 white？

Answer 1

作为 Stian Martinsen suggested -webkit-appearance: none; 禁用 <select> 标签的默认样式，但它也隐藏了箭头。所以我找到了这个代码的解决方法：

.dropdown{
 		font-size: 20px;
 		background: white;
 		border:none;
 		position: relative;
 		-webkit-appearance: none;
        padding-right: 10px;
 	}
 	.dropdown:focus{
 		outline: none;
 	}
 	.plain-selector{
 		margin: 0 3px;
 	}
 	.plain-selector::after{
	 	content: "";
	    position: absolute;
	    z-index: 2;
	    bottom: 30%;
	    margin-top: -3px;
	    height: 0;
	    width: 0;
	    right: 0;
	    border-top: 6px solid black;
	    border-left: 6px solid transparent;
	    border-right: 6px solid transparent;
	    pointer-events: none;
 	}
 	.plain-selector::before{
	 	content: "";
	    position: absolute;
	    z-index: 2;
	    top: 30%;
	    margin-top: -3px;
	    height: 0;
	    width: 0;
	    right: 0;
	    border-bottom: 6px solid black;
	    border-left: 6px solid transparent;
	    border-right: 6px solid transparent;
	    pointer-events: none;
 	}
 	.out-selector{
 		position: relative;
 	}
     .outter-selection{
     	width: 100%;
     }
     .selection{
   	display: block;
 	margin: auto;
 	border-radius: 50px;
 	background: white;
 	padding: 5px;
 	max-width: 360px;
 	text-align: center;
 	width: 90%;
 	position: relative;
 }
body{
 		margin-top: 4em;
 		background: #2f2f2f;
 		color: white;
 		font-size: 23px;
 	}

<div class="outter-selection">
	<div class="selection">
		<span class="out-selector"><span class="plain-selector"><select class="dropdown">
			<option value="1" selected="selected">select 1</option>
			<option value="2">select 2</option>
			<option value="3">select 3</option>
			<option value="4">select 4</option>
		</select></span></span>
		<span class="out-selector"><span class="plain-selector"><select class="dropdown">
            <option value="1" selected="selected">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
          </select></span></span>
		<span class="out-selector"><span class="plain-selector"><select class="dropdown">
            <option value="1" selected="selected">1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
          </select></span></span>
	 </div>
 </div>

Answer 2

尝试添加这个 CSS 来禁用 Ios 的默认样式：

-webkit-appearance: none;

这也适用于具有特殊样式的其他元素，例如 input[type=search]。