Question

我正在尝试使用appearance：none属性设置select元素的样式。我的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，您可以使用隐藏属性来解决此问题。

＆＃13;

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

＆＃13;

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

使用外观无css属性为select元素设置样式

1 个答案: