如何自定义只有<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>下拉箭头？

回答

相关问题