在 Mac /safari 或 chrome 上选择框“外观”答案

【问题标题】：Select box `appearance` on Mac /safari or chrome在 Mac /safari 或 chrome 上选择框“外观”
【发布时间】：2017-12-05 19:25:30
【问题描述】：

如何使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>

【问题讨论】：

查看appearance CSS 属性
@JohnEllmore 我刚刚编辑了帖子！我的意思是说远离外观属性。因为我不想处理箭头和背景问题

标签： html css macos google-chrome

【解决方案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>

【讨论】：

css 不工作@freginold，仍然没有尝试 js
@Abdal 你是什么意思，它没用？看起来不一样？您可以随意调整颜色和厚度。

【解决方案2】：

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

【讨论】：

【解决方案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;

【讨论】：