html - 使用 appearance none css 属性设置选择元素的样式

Question

我正在尝试使用 appearance:none 属性设置选择元素的样式。我的 html 和 css 与 http://codepen.io/destinypallavi/pen/LRGoro 中一样

select#lstReports {
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-color: #477928;
  border: 2px solid blue;
  display: inline-block;
  width: 30px;
  height: 30px;
  /*position:relative;*/
}
select#lstReports + i {
  color: #fff;
  margin-left: -26px;
  font-size: 10px;
  vertical-align: middle;
}

<select id="lstReports">
  <option>1</option>
  <option>1</option>
  <option>1</option>
</select>
<i class="fa fa-lg fa-chevron-down"></i>

我能够在一定程度上实现样式。但是在firefox中，默认的内容是第一个<option>标签正在显示？
如何删除默认选项标签值以停止出现在样式化的选择标签上？

Answer 1

对于 html 5，您可以使用隐藏属性来解决此问题。

<select id="lstReports">
  <option hidden></option>
  <option>06</option>
  <option>1</option>
  <option>1</option>
</select>

http://codepen.io/anon/pen/XjXLXO这是我的代码笔链接