Стилизация

Как стилизовать выпадающий список?
.select { background: url(imageselect.png) no-repeat transparent background-position: 95% 50% border-radius: 5px margin-right: 2% margin-bottom: 20px width: 220px height: 30px }
.select>select:active, .select>select:focus { background: url(imageselectactive.png) no-repeat transparent }
select>option { background-color: transparent border: 0 background-image: url(images/option.png) padding-right: 15px height: 31px width: 220px }
select>option:nth-child(1) { background-image: url(images/option1.png) }
select>option:nth-last-child { background-image: url(images/optionlast.png) }
.select>select { width: 100% color: black font-size: 14px font-family: 'Helvetica Neue', Helvetica, sans-serif line-height: 2.5 background: transparent border: 0 overflow: hidden -webkit-appearance: none -moz-appearance: none }




Ответ
На самом деле стилизовать только с помощью CSS можно. С некоторыми ограничениями, и все же. Для этого нужно спрятать select внутри div, и стилизовать сам div.


* {
color: #6C7231
font-family: Helvetica
font-weight: bold
}

#content {
width: 300px
margin: 20px auto
padding: 10px
border: 1px dotted gray
}

.select-wrapper {
position: relative
width: 300px
margin: 20px 0
border: 1px solid #6C7231
border-radius: 3px
}

.select-wrapper:hover {
box-shadow: 0px 0px 3px gray
}

.select-wrapper select {
width: 300px
height: 28px
padding: 0 20px 0 7px
background: transparent
border: 0
appearance: none /* remove arrow */
-webkit-appearance: none /* remove arrow Chrome */
-moz-appearance: none /* remove arrow FF */
}
.select-wrapper select::-ms-expand{
display: none /* remove arrow IE */
}

/*
* Style #1
* todo: try to change arrow DIV to pseudo :after
*/

.select-arrow-1 {
position: absolute
z-index: -9999
right: 4px
bottom: 5px
border: 8px solid
border-color: white white #6C7231 white
border-right: 0
}

/* Style #2 */

.select-arrow-2 {
width: 8px
height: 0px
background: #6C7231
position: absolute
z-index: -9999
right: 6px
top: 14px
}
.select-arrow-2:before {
content: ''
position: absolute
top: -6px
border: 4px solid transparent
border-bottom-color: #6C7231
border-top: 0
}
.select-arrow-2:after {
content: ''
position: absolute
top: 1px
border: 4px solid transparent
border-top-color: #6C7231
border-bottom: 0
}

/* Style #3 */

.select-arrow-3 {
position: absolute
z-index: -9999
border: 8px solid transparent
border-bottom: 0
right: 6px
}
.select-arrow-3:nth-child(1) {
top: 11px
border-top-color: #6C7231
}
.select-arrow-3:nth-child(2) {
top: 8px
border-top-color: #FFF
}




Пример можно посмотреть тут: http://codepen.io/Eliseenko/pen/bdarGM
Это очень старый пример, можно сделать намного лучше. Что касается option, то на чистом css он стилизуется, но не во всех браузерах.