css 如何在 Safari 上选择相同的 Chrome

Question

我有一个这样的选择：

<select id="sbInBreak2_hh" name="sbInBreak2_hh">
	<option value="0">00</option>
	<option value="1">01</option>
	<option value="2">02</option>
	<option value="3">03</option>
	<option value="4">04</option>
	<option value="5">05</option>
	<option value="6">06</option>
	<option value="7">07</option>
	<option value="8">08</option>
	<option value="9">09</option>
	<option value="10">10</option>
	<option value="11">11</option>
	<option value="12">12</option>
	<option value="13">13</option>
	<option value="14">14</option>
	<option value="15">15</option>
	<option value="16">16</option>
	<option value="17">17</option>
	<option value="18">18</option>
	<option value="19">19</option>
	<option value="20">20</option>
	<option value="21">21</option>
	<option value="22">22</option>
	<option value="23">23</option>
</select>

在 Chrome 上没问题，PM 要求我在 Safari 和 IE 上显示在 Chrome 上相同吗？css怎么可以呢？

在 Chrome 上

在 Safari 和 IE 上

Answer 1

Try like this.

Try like this.

select::-ms-expand { display: none; }
select {
    box-shadow:none;   
    outline:none;      
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position-x: 21px;
    background-position-y: 0px;
    border: 1px solid #dfdfdf;
    padding: 5px;
    width: 44px;
}
/*select::-ms-expand { display: none; }*/