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

Question

如何在所有网络浏览器和设备上使select框看起来一样，但我找不到正确的方法，到目前为止最大的问题是在IE 10和Microsoft边缘，它似乎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>

Answer 2

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

我添加了一个图像作为选择字段的背景，有些人推荐它并且它工作得很好。 只需将下面的内容添加到css中的.select：

  background: #fff;
  border-radius: 0;
  -webkit-appearance: none;
  /* **this should be your icon or image to replace the down arrow** */
  background :url('http://via.placeholder.com/10x10') 95% no-repeat;
  background-color: #fff;
  background-position: right;
  background-size: 14px;