如何使用Zurb Foundation 5調整下拉按鈕的樣式？

Question

我正在使用Zurb Foundation 5和Sass mixins，並且我想要更改下拉箭頭的樣式。我非常有信心，它介於這裏裏面，但我不知道它是什麼：

// Dropdown Buttons 

// $include-html-button-classes: $include-html-classes; 

// We use these to set the color of the pip in dropdown buttons 
// $dropdown-button-pip-color: #fff; 
// $dropdown-button-pip-color-alt: #333; 

// $button-pip-tny: rem-calc(6); 
// $button-pip-sml: rem-calc(7); 
// $button-pip-med: rem-calc(9); 
// $button-pip-lrg: rem-calc(11); 

// We use these to style tiny dropdown buttons 
// $dropdown-button-padding-tny: $button-pip-tny * 7; 
// $dropdown-button-pip-size-tny: $button-pip-tny; 
// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3; 
// $dropdown-button-pip-top-tny: -$button-pip-tny/2 + rem-calc(1); 

// We use these to style small dropdown buttons 
// $dropdown-button-padding-sml: $button-pip-sml * 7; 
// $dropdown-button-pip-size-sml: $button-pip-sml; 
// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3; 
// $dropdown-button-pip-top-sml: -$button-pip-sml/2 + rem-calc(1); 

// We use these to style medium dropdown buttons 
// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3); 
// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3); 
// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5; 
// $dropdown-button-pip-top-med: -$button-pip-med/2 + rem-calc(2); 

// We use these to style large dropdown buttons 
// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3); 
// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); 
// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5; 
// $dropdown-button-pip-top-lrg: -$button-pip-lrg/2 + rem-calc(3); 

以下是我有：

而且我要的下拉箭頭看起來更像是這樣的：

我怎樣才能做到這一點？提前致謝！

===== 編輯 ===== 有了這個SCSS：

.dropdown.button:before{ 
    width: 15px; 
    height: 15px; 
    border: none; 
    background: url("../images/dropdown.png") no-repeat; 
} 

而且這個網站：

<a href="#" data-dropdown="drop" class="button login dropdown width-limit">fake@emailaddress.com</a><br> 
     <ul id="drop" data-dropdown-content class="f-dropdown"> 

的按鈕看起來是這樣的：

我該怎麼辦現在過了箭頭？ 已更新jsfiddle：http://jsfiddle.net/Y4jDW/

Answer 1

在您的示例中沒有默認箭頭標記，但可以覆蓋Foundation的樣式。只需添加這些樣式：

.dropdown.button:before{ 
    width: 10px; //width of your arrow 
    height: 10px; //height of your arrow 
    border: none; 
    background: url(...) no-repeat; //url for image 
} 

Answer 2

您可以找到類中的CSS/foundation.css行：1261

這是原來的代碼：

.top-bar-section .has-dropdown > a:after { 
    content: ""; 
    display: block; 
    width: 0; 
    height: 0; 
    border: inset 5px; 
    border-color: rgba(168, 168, 168, 1) transparent transparent transparent; 
    border-top-style: solid; 
    margin-top: -2.5px; 
    top: 22.5px; } 

你可以試試這個：

.top-bar-section .has-dropdown > a:after { 
    content: ""; 
    display: block; 
    width: 10px; 
    height: 10px; 
    border: none; 
    background-image: url(img/arrow.png) no-repeat; 
    margin-top: -2.5px; 
    top: 22.5px; } 

祝你好運！