无法重置CSS外观属性

Question

我正在处理的网站已删除带有以下框的下拉箭头：

select {
      -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

我需要重新添加它，但到目前为止我没有尝试过任何工作

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select.diff {
  /* Aswell as normal, I have also tried revert & unset */
  -webkit-appearance: normal;
  -moz-appearance: normal;
  appearance: normal;
}

<select>
  <option>Trains</option>
  <option>Planes</option>
  <option>Automobiles</option>
</select>
<select class="diff">
  <option>Oranges</option>
  <option>Pears</option>
  <option>Apple</option>
</select>

Answer 1

您需要设置为menulist

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select.diff {
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  appearance: menulist;
}

<select>
  <option>Trains</option>
  <option>Planes</option>
  <option>Automobiles</option>
</select>
<select class="diff">
  <option>Oranges</option>
  <option>Pears</option>
  <option>Apple</option>
</select>

检查appearance选项here

Answer 2

you may use the :not() pseudo class to filter select to witch apply that rule:

select:not([class]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

<select>
  <option>Trains</option>
  <option>Planes</option>
  <option>Automobiles</option>
</select>
<select class="diff">
  <option>Oranges</option>
  <option>Pears</option>
  <option>Apple</option>
</select>

Answer 3

Also You need to know that there is syntax error ("none"). This is the list of possible options for appearance: appearance: normal|icon|window|button|menu|field

You can check it here.