html - 在 Mac/safari 或 chrome 上选择框 `appearance`

Question

如何使 select 框在所有网络浏览器和设备上看起来都一样，但我找不到正确的方法，目前最大的问题是 IE 10 和 Microsoft edge，看来 appearance 不工作了!

谁能帮忙解决这个问题？谢谢。

.form {
  width: 300px;
  padding: 20px;
  background-color: #f5f5f5;
}

.textfield,
.select {
  margin-top: 5px;
  padding: 5px;
  width: 100%;
}

.select {
  background: #fff;
  border-radius: 0;
}

<div class="form">
  <div>
    <label for="text">
      <nobr>Text field</nobr>
    </label>
    <br />
    <input name="text" tabindex="1" class="textfield" />
  </div>
  <br />
  <div>
    <br />
    <select name="select" tabindex="2" class="select">
      <option value="">&#45;&#45; Please Select &#45;&#45;</option>
      <option value="option 1">Option 1</option>
      <option value="option 2">Option 2</option>
    </select>
  </div>
</div>

Answer 1

要使文本框和选择框在样式方面完全相同，请选择您想要的样式(例如 border: 1px solid #666666 以模仿 <input> 元素)并将其应用于你的.textfield和 .select一起上课。

如果需要，您可以使用 JavaScript 仅在用户使用 Mac 时应用该样式。 (参见 this answer。)

.form {
  width: 300px;
  padding: 20px;
  background-color: #f5f5f5;
}

.textfield,
.select {
  margin-top: 5px;
  padding: 5px;
  width: 100%;
  border: 1px solid #666666;
}

.select {
  background: #fff;
  border-radius: 0;
}

.asterisk {
  color: #FF0004;
}

<div class="form">
  <div>
    <label for="text">
      <nobr>Text field</nobr>
    </label>
    <br />
    <input name="text" tabindex="1" class="textfield" />
  </div>
  <br />
  <div>
    <label for="select">
      <nobr>Select<span class="asterisk">&#42;</span></nobr>
    </label>
    <br />
    <select name="select" tabindex="2" class="select">
      <option value="">&#45;&#45; Please Select &#45;&#45;</option>
      <option value="option 1">Option 1</option>
      <option value="option 2">Option 2</option>
    </select>
  </div>
</div>