如何自定義只有<select>下拉箭頭？

這是下拉的代碼如何自定義只有<select>下拉箭頭？

<select id="dropdown"> 
       <option value="">Go to page...</option> 
       <option value="http://stackoverflow.com">CSS-Tricks</option> 
       <option value="http://superuser.com">Digging Into WordPress</option> 
       <option value="http://metastackoverflow.com">Quotes on Design</option> 
      </select>

我只是想自定義箭頭圖像背景和邊框？我知道很多jquery和moo工具插件，但我想要簡單和可定製的jquery方式？

alt text http://easycaptures.com/fs/uploaded/226/6042718975.png

來源

2010-01-26 Jitendra Vyas

它不可能只是風格。儘管我回寫了selectzor來滿足這些需求。看看下面。

http://jeremy.infinicastonline.com/2010/01/selectzor/

來源

2010-01-26 20:12:05

我只在整個網站上有一個下拉菜單。是否值得使用我們的解決方案只有一個下拉菜單。和你的解決方案，因爲你提到的不兼容IE 6，我也需要。但我喜歡你的解決方案。 – 2010-01-26 20:18:54

可以讓你的selectzor.js更小，只需一個下拉菜單。我不需要示例2的功能，這是示例文件 – 2010-01-26 20:23:59

的開源代碼，因此您可以將部分代碼撕掉。 – 2010-01-26 20:37:16

下拉菜單是由操作系統，而不是瀏覽器中呈現。除此之外，你無法控制自己。

來源

2010-01-26 20:22:53

你也不能用jQuery來設計它。 jQuery不是一個魔術棒，它可以讓你做任何你能想象到的網頁。

一般情況下，您的樣式表單控件的選擇都將是十分有限的，因爲：

這將會是複雜的瀏覽器廠商，讓表單控件是設置樣式;和
表單控件總是看起來是一樣的。這意味着用戶知道他們是什麼，因此當他們點擊它們時會發生什麼。

來源

2010-01-26 20:22:54

1.似乎不會爲其他表單元素「複雜化」。它只是從來沒有成爲HTML規範的一部分。 – 2010-01-26 20:28:34

「似乎不會爲其他表單元素」複雜「。」啊，你顯然從來沒有嘗試過設計HTML複選框。 http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/ – 2010-01-26 21:07:00

這是我做的另一種選擇。可能有幫助。

Codepen example

<div class="credit-mob-rate"> 
    <fieldset> 
     <select id="timeframe-select" class="timeframe" tabindex="-1"> 
     <option value="1" selected="">1 an</option> 
     <option value="2">2 ani</option> 
     <option value="3">3 ani</option> 
     <option value="4">4 ani</option> 
     <option value="5">5 ani</option> 
     </select> 
     <span class="ion-arrow-down-b"></span> 
    </fieldset> 
</div>

並針對不同事件的js。你會發現那裏的CSS。

$("#timeframe-select").blur(function() { 
    console.log('blur'); 
    $('.credit-mob-rate').removeClass('highlight-mobile'); 
    $('.credit-mob-rate fieldset span').addClass("ion-arrow-down-b"); 
    $('.credit-mob-rate fieldset span').removeClass("ion-arrow-up-b"); 
}); 

$("#timeframe-select").change(function() { 
    if ($('.credit-mob-rate fieldset span').hasClass('ion-arrow-up-b')) { 
     this.selectChanged = true; 
    } 
    console.log('change'); 
    $('.credit-mob-rate fieldset span').addClass("ion-arrow-down-b"); 
    $('.credit-mob-rate fieldset span').removeClass("ion-arrow-up-b"); 
}); 

$("#timeframe-select").click(function() { 
    console.log('click'); 
    if (this.selectChanged) { 
     this.selectChanged = false; 
     return; 
    } 

    if ($('.credit-mob-rate fieldset span').hasClass('ion-arrow-up-b')) { 

     $('.credit-mob-rate fieldset span').addClass("ion-arrow-down-b"); 
     $('.credit-mob-rate fieldset span').removeClass("ion-arrow-up-b"); 
    } else { 
     $('.credit-mob-rate fieldset span').addClass("ion-arrow-up-b"); 
     $('.credit-mob-rate fieldset span').removeClass("ion-arrow-down-b"); 
    } 
    $('.credit-mob-rate').addClass('highlight-mobile'); 
}); 

$("#timeframe-select").on('keypress', function(e) { 
    if (e.charCode != 13 && e.charCode != 10) { 
     return; 
    } 
    console.log('keypress'); 
    if (this.selectChanged) { 
     this.selectChanged = false; 
     $('.credit-mob-rate').addClass('highlight-mobile'); 
     $('.credit-mob-rate fieldset span').addClass("ion-arrow-down-b"); 
     $('.credit-mob-rate fieldset span').removeClass("ion-arrow-up-b"); 

    } else { 
     $('.credit-mob-rate').addClass('highlight-mobile'); 
     $('.credit-mob-rate fieldset span').addClass("ion-arrow-up-b"); 
     $('.credit-mob-rate fieldset span').removeClass("ion-arrow-down-b"); 
    } 
});

來源

2016-11-22 11:52:17 DragosB

如何自定義只有<select>下拉箭頭？

回答

相關問題