在頂欄中更改Foundation drowpdown箭頭的顏色

試圖更改Foundation 6頂欄中的下拉箭頭，但沒有運用此forum answer。在頂欄中更改Foundation drowpdown箭頭的顏色

我沒有看到這些類在我的基金會6，所以我所做的就是：

.top-bar .is-dropdown-submenu-parent > a:after { 
    border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 
}

但依然沒有改變。

HTML（紅寶石）：

<div class="top-bar"> 
    <div class="top-bar-left"> 
    <ul class="dropdown menu" data-dropdown-menu> 
     <li class="menu-text"> 
     <%= image_tag('logo.png', size: '40x40') %> 
     </li> 
     <li> 
     <a href="/">Dashboard</a> 
     </li> 
     <li> 
     <a href="#">Accounts</a> 
     <ul class="menu vertical"> 
      <li><%= link_to 'Sales', sales_path %></li> 
      <li><%= link_to 'Inventory', inventory_path %></li> 
     </ul> 
     </li> 
     <li><%= link_to 'Settings', settings_path %></li> 
    </ul> 
    </div> 
</div>

來源

2016-10-03 Sylar

粘貼你的html和css請 – RasmusGlenvig

這是由於CSS Specificity。「默認」 Foundaiton選擇是

.dropdown.menu > li.is-dropdown-submenu-parent > a::after{}

注意選擇的第一部分，它採用兩班 - .dropdown和.menu，而你的選擇只使用.top-bar。第二部分還使用li選擇器。 Compare those two CSS selectors with this CSS specificity calculator。

因此，使用該選擇：

.dropdown.menu > li.is-dropdown-submenu-parent > a::after{ 
    border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0); 
}

或者您可以使用!important。

來源

2016-10-03 13:06:13 Vucko

請使用： -

.top-bar .is-dropdown-submenu-parent > a:after { 
    border-color: #FF0000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)!important; 
}

來源

2016-10-03 13:10:10

我看你用SCSS，所以你可以配置的基礎變量發生變化的組件視圖。 Here是所有可用變量的列表。更改$dropdownmenu-arrow-color將新顏色設置爲箭頭。

來源

2016-10-03 13:26:52 3rdthemagical

在頂欄中更改Foundation drowpdown箭頭的顏色

回答

相關問題