自定义特定select样式失效求助：移除边框与默认外观

我来帮你排查下问题所在，主要有两个关键点导致样式没生效：

1. HTML中重复的class属性无效 #

你的select标签写了两个class属性：

<select class="form-control" class="venue-type" onchange="myFunction()">

浏览器只会识别第一个class属性，venue-type这个类根本没被应用到select上，自然无法通过这个类定位元素。需要把多个class合并到同一个属性里，用空格分隔：

<select class="form-control venue-type" onchange="myFunction()">
  <option value="none" id="#hide">Select Venue Type</option>
  <option>Theme Restaurant</option>
  <option>Blah restaurant</option>
  <option>Flana Restaurant</option>
  <option>Woops Restaurant</option>
</select>

2. CSS选择器写法错误 #

你写的select venue-type是后代选择器，它的作用是选择嵌套在<select>标签里的<venue-type>元素（这显然不存在），而不是选择带有venue-type类的select元素。正确的选择器写法如下：

/* 选择带有venue-type类的select元素 */
select.venue-type {
  border: 0 !important;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  /* 可选：去掉默认背景，让样式更干净 */
  background-color: transparent;
}

如果form-control类自带的边框样式优先级很高，你也可以用更具体的选择器提升优先级，甚至能去掉!important：

.form-control.venue-type {
  border: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
}

这样修改后，样式就只会作用到这个带有venue-type类的select上，不会影响其他select元素了。

内容的提问来源于stack exchange，提问作者juhi