HTML下拉箭头?我究竟做错了什么?d:

Question

我已经创建了一种新的选择样式，以便在某些页面中使用，而这种工作正常，我正在努力以获取下拉箭头以显示。我正在尝试从字体上显示箭头（字体负载，很好，问题是我试图使其正常工作的方式）

以下是我在页面上的下拉列表之一的一个示例，现在根本没有显示箭头。

/** dropdown styling **/
.selectadmin {
  box-sizing: border-box;
  color: #666;
  background: #fff;
  height: 30px;
  box-shadow: inset 0 -5px 7px rgba(0, 0, 0, 0.08);
  border: 1px solid #d8d8d8;
  border-radius: 5px;
}
/** dropdown arrow **/
.selectadmin:before {
  font-family: 'WebSymbolsRegular';
  content: ';';
  position: absolute;
  right: 9px;
  top: 0;
  line-height: 235%;
  height: 100%;
  padding-left: 10px;
  border-left: 1px solid #d7d7d7;
}
/** dropdown arrow **/
.selectadmin:after {
  font-family: 'WebSymbolsRegular';
  content: ':';
  font-size: 18px;
  position: absolute;
  top: 0;
  line-height: 120%;
}

<tr>
  <td width="40%" class="trow2admin"><strong><span class="admintitle">Selection:</span></strong></td>
  <td width="60%" class="trow2admin"><select class="selectadmin" ; style="width:48%" ;>
       <option value="default">General</option>
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
       <option value="4">Four</option>
       <option value="5">Five/option>
        <option value="6">Six</option>
       </td>
    </select>
</tr>

帮助肯定会不胜感激，我尝试包装，但根本没有起作用。它所做的只是创建下拉式样式的不可行的副本，也没有字体箭头。

Answer 1

问题很可能是在select标签上使用伪元素 - 我认为这是不可能的。

作为解决方法，尝试将select包装在额外的div中，然后将before和after移至该元素。