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

【问题标题】：how can css for select on Safari same Chrome如何在 Safari 相同的 Chrome 上选择 css
【发布时间】：2019-05-27 17:18:19
【问题描述】：

我有一个这样的选择：

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

【问题讨论】：

问题是如何设置选择字段的样式？
你在所有浏览器中都有显示，那是什么问题？
可以看到，Chrome 下的成像器和 Safari 上的不一样。

标签： javascript html css

【解决方案1】：

您需要申请-webkit-appearance:none；并使用背景图像进行选择。

【讨论】：

có nhiều cách mà bạn。 Bạn có thể làm 1 cái border arrow hoặc tìm 1 cái image arrow giống thế kia cũng được.

【解决方案2】：

如果我正确理解了您的问题，那么您可以添加以下 CSS 以防止在 IE 和 Safari 上出现“突出显示”效果：

#sbInBreak2_hh,
#sbInBreak2_hh:focus {
    box-shadow:none;   /* Prevent blurred border */
    outline:none;      /* Prevent hard outline */
}

【讨论】：

谢谢，如何显示按钮内部填充黑色相同的铬？
不客气 - 抱歉，不确定您所说的内部填充是什么意思？你的意思是把白色背景改成黑色背景？
我的意思是：Chrome 上的三角形与 Safari 不同
@HongVanVit 看看这个stackoverflow.com/questions/14218307/select-arrow-style-change

【解决方案3】：

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; }*/

<select id="sbInBreak2_hh" name="sbInBreak2_hh" style="width:44px;">
	<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>

【讨论】：