在顶栏中更改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箭头的颜色

回答

相关问题