HTML下拉箭頭？我究竟做錯了什麼？ D：

我創建了一個新的選擇樣式用於某些頁面，雖然這工作正常，我正努力讓下拉箭頭顯示。我試圖顯示一個字體的箭頭（字體加載和罰款，問題是我如何讓它工作）HTML下拉箭頭？我究竟做錯了什麼？ D：

下面是一個下拉列表中的一個示例頁面，現在沒有任何箭頭正在顯示。

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

幫助肯定會理解的，我試過包裝，但它並沒有在所有的工作。它所做的只是創建一個不可操作的下拉式樣副本，也沒有字體箭頭。

來源

2017-03-07 BK1

沒有嘗試添加'位置：relative'到.selectadmin類 –

你有錯誤（在選擇起始標籤無關分號;結束一輪標記錯誤的方式），但我不知道引起該問題。會添加「外觀：無」（具有適當的前綴）有幫助嗎？ –

@PullataPraveen - 添加它使得箭頭顯示，（在一個包含selectadmin標籤的下拉菜單中，它顯示了它應該如何但它不可點擊）。 - 周圍沒有標籤，下拉箭頭在左側。 https://i.imgur.com/zxBhkQ3.png https://i.imgur.com/DiMtwSH.png – BK1

這很可能是問題是在select標籤上使用了僞元素 - 我不認爲這是可能的。

作爲一種變通方法，嘗試包裹select一個額外div，然後在該元素移動before和after。

來源

2017-03-07 11:58:02 gwcodes

HTML下拉箭頭？我究竟做錯了什麼？ D：

回答

相關問題