如何使Safari和Chrome的CSS选择器相同

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上

- Hong Van Vit

---

问题是如何为选择字段设置样式？ - René Höhle

你在所有浏览器中都有显示，那问题出在哪里呢？ - Mister Jojo

你可以看到，在Chrome浏览器中的图像与Safari浏览器中的不同。 - Hong Van Vit

Answer 1

你需要应用-webkit-appearance:none；并使用背景图片来设置选择框。

- Hoàngg

---

有许多方法可以做到这一点。您可以创建一个边框箭头，或者找到一个类似于那样的图像箭头也可以。 - Hoàngg

Answer 2

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>

- A Good Boy

Answer 3

如果我正确理解了您的问题，那么您可以添加以下CSS代码来防止IE和Safari浏览器中出现“高亮”效果：

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

- Dacre Denny

---

谢谢，如何使按钮内部填充黑色与 Chrome 相同？ - Hong Van Vit

不用谢 - 抱歉，我不确定您所说的“内部填充”是什么意思？您是指将白色背景更改为黑色背景吗？ - Dacre Denny

我的意思是：在Chrome上，三角形与Safari上不同。 - Hong Van Vit

@HongVanVit，请看一下这个链接：https://dev59.com/pWYq5IYBdhLWcg3wxTSq - Dacre Denny