Selectbox dropdown styling

This question already has an answer here:

How to style a <select> dropdown with CSS only without JavaScript? 24 answers

---

The trick is to use background-color: transparent; and border: 0; for select element, and also make sure your select element is larger than the container element.

Demo

Demo 2 (Little better looking demo)

.styled-select{
    width: 150px;
    height: 30px;
    overflow: hidden;
    background: url('http://www.simonsweb.dk/selectbox.png') no-repeat right; 
    border:0;
}

.styled-select select {
    width: 180px;
    background: transparent;
    border: 0;
    height: 30px;
    margin-top: 5px;
}

---

Thank you for all your cool suggestions. I actually ended up using a FansySelectBox plugin, that works cross browser.

http://code.octopuscreative.com/fancyselect/

Edit: I don't know in this case if it is acceptable to answer my own question in this case or?

链接地址: http://www.djcxy.com/p/41596.html

上一篇: 仅使用CSS / CSS3设计<select>菜单的样式

下一篇: 选择框下拉式样