Пользовательское изображение на css

Question

Я пытаюсь создать свой раскрывающийся ящик css, используя только css ... Прежде всего, в моем раскрывающемся списке есть пользовательская стрелка html вниз, я пытаюсь поместить изображение на свой CSS, чтобы взять эту стрелку по умолчанию вниз, так что я могу поставить свое собственное изображение на нем, но я понятия не имею, как это сделать ...

Это мой CSS для выпадающего меню:

select { 
    height:32px; 
    line-height:42px; 
    width: 88%; 
} 

Как я могу поставить свой собственный образ в этот код? Я также попытался следующий учебник, но не использование его для меня, я не могу заставить его работать правильно ...

http://bavotasan.com/2011/style-select-box-using-only-css/

Answer 1

Учебник работает для меня очень хорошо.

Я создал для вас скрипку, но вы должны понять, что автор хочет сказать.

HTML код

<div class="styled-select"> 
    <select> 
     <option>Here is the first option</option> 
     <option>The second option</option> 
    </select> 
</div> 

код CSS

.styled-select { 
    width: 240px; 
    height: 34px; 
    overflow: hidden; 
    background: url('http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg') no-repeat right #ddd; 
    border: 1px solid #ccc; 
} 

.styled-select select { 
    background: transparent; 
    width: 268px; 
    padding: 5px; 
    font-size: 16px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
} 

http://jsfiddle.net/zNCBY/