HTML OSX 上的下拉菜单显示不同

Question

我有一个带有输入和下拉列表的 HTML 表单。所有的样式都使用 CSS。但是由于奇怪的原因，下拉菜单没有响应我设置的 CSS 样式。如果您查看屏幕截图，您会看到输入字段显示正确，但下拉菜单似乎使用了一些 OSX 默认外观，这看起来有点不对劲。奇怪的是，当我在 windows 机器上测试它时，它显示正确。我应该添加什么才能使它在 OSX 上正确显示吗？

Answer 1

尝试使用 CSS 重置。

那里有几个。如果你使用 HTML5 你可能想要 Normalize.css: https://necolas.github.io/normalize.css/

如果您使用的是传统 HTML，那么 Meyer Reset 2.0 应该可以：http://meyerweb.com/eric/tools/css/reset/

转到上面的链接并下载文件。 Link你自己的样式之前的文件。

Answer 2

感谢 fiddle，我成功地重现了您的问题并找到了解决方法。

我必须将规则 appearance: none; 添加到 select 标签。

.form-field {
  padding-bottom: 20px;
}

.form-label {
  color: #6E6E6E;
  padding-bottom: 4px;
  font-size: 16px;
}

.input1 {
  width: 90%;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #3E3E3E;
}

select {
  -webkit-appearance: none;  /* for webkit (safari, chrome) compatibility */
  -moz-appearance: none; /* for firefox compatibility */
  appearance: none;
}

<div class="form-field">
  <div class="form-label">
<span>State *</span>
  </div>
  <div class="form-input">
<select id="state" class="input1">
  <option value="FL" selected="selected">Florida</option>
</select>
  </div>
</div>

HTML OSX 上的下拉菜单显示不同

HTML Dropdown appears different on OSX

html

css

drop-down-menu