在ios / safari / iPhone上设置HTML样式标签

Question

我有三个下拉列表（三个<select>元素）。我用css称呼它们：

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

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

正如您所看到gradient中的background和background black附近的箭头<select>。

  

如何设置white元素的样式，以便在ios上设置背景public partial class Form1 : Form { public Form1() { InitializeComponent(); } private void btnCalculate_Click(object sender, EventArgs e) { double change = Convert.ToDouble(txtOffered.Text) - Convert.ToDouble(txtDue.Text); // MessageBox.Show(change.ToString()); double hund = 100; double fifty = 50; double twent = 20; double ten = 10; double five = 5; double two = 2; double one = 1; double fifcent = 0.50; double twentcent = 0.20; double tencent = 0.10; double fivecent = 0.05; while (change > 0) { if (change >= hund) { txtChange.Text += "1x $100 \r\n"; change = change - hund; } else if (change >= fifty) { txtChange.Text += "1x $50 \r\n"; change = change - fifty; } if (change >= twent) { txtChange.Text += "1x $20 \r\n"; change = change - twent; } else if (change >= ten) { txtChange.Text += "1x $10 \r\n"; change = change - ten; } if (change >= five) { txtChange.Text += "1x $5 \r\n"; change = change - five; } else if (change >= two) { txtChange.Text += "1x $2 \r\n"; change = change - two; } if (change >= one) { txtChange.Text += "1x $1 \r\n"; change = change - one; } else if (change >= fifcent) { txtChange.Text += "1x 50c \r\n"; change = change - fifcent; } if (change >= twentcent) { txtChange.Text += "1x 20c \r\n"; change = change - twentcent; } else if (change >= tencent) { txtChange.Text += "1x 10c \r\n"; change = change - tencent; } if (change >= fivecent) { txtChange.Text += "1x 5c \r\n"; change = change - fivecent; } } } } ？

Answer 1

尝试添加此CSS以禁用Ios＆＃39;默认样式：

-webkit-appearance: none;

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

Answer 2

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

＆＃13;

＆＃13;

.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;
 	}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;