Question

我已经创建了一个新的选择样式，可以在某些页面中使用，虽然这很好但我很难获得下拉箭头。我试图从字体中显示箭头（字体加载并且很好，问题是我试图让它工作的方式）

以下是我在网页上显示的其中一个下拉菜单的示例，此时此处并未显示任何箭头。

＆＃13;

/** 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%;
}

＆＃13;

<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>

＆＃13;

帮助肯定会受到赞赏，我尝试过包装，但它根本不起作用。所有它确实创建了一个不可用的下拉样式副本，也没有字体箭头。

Answer 1

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

要解决此问题，请尝试将select包裹在额外的div中，然后将before和after移到该元素上。

HTML下拉箭头？我究竟做错了什么？ d：

1 个答案: