Как стилизовать select на JavaScript(не JQUery) и CSS, я иска нашел то что нужно но там уже ничего нельзя скачать и разобраться, помогите схему действий накидать (ну разобратся короче)!
4 ответа
Создай слой div
с абсолютной позицией с фиксированной шириной и высотой
в его стиль так же напиши
overflow-x:none;
overflow-y:scroll;
или так
overflow-x:none;
overflow-y:auto;
Пихни в главный див кучу дивов, каждый див со своим словом (что будет в селекте).
Вот и все.
Потом показывай главный слой при щелчке на кто-нибудь.
вот слой
<div class="select">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
стиль к нему
.select {
width:90px;
height:150px;
position:absolute;
left:0px;
top:30px;
border:1px solid #ff0000;
overflow-x:none;
overflow-y:auto;
}
.select div {
cursor:pointer;
}
.select div:hover {
background:#555555;
}
Можно использовать фоновые картинки и т.д.
Для того чтобы сделать чтобы этот слой всплывал по нажатию со стрелочкой вниз нужно создать еще слой.
<div style="position:relative; width:92px;">
<div style="height:30px;">нажми чтобы выбрать</div>
<!-- сюда нужно воткнуть слой селекта который написан выше -->
</div>
примерно как то так, не проверял то что получилось но должно работать
-
-
если интересно то во тут plus.onzagame.ru в регистрации выбор пола ... – Kirpich643 3 янв '13 в 11:26
-
и буду счастлив если кто нибудь подскажет почему так анимация глючит ? – Kirpich643 3 янв '13 в 11:28
-
@Kirpich643, до решения проблем с анимацией, я бы советовал исправить более ощутимые баги. Например, вот что я вижу после начала "регистрации" (первое окно не скрывается до конца). Кликаю на выбор пола, но если не выбираю, то список не скрывается. Когда начиная набирать свой email, "подсказки" всплывают в загадочном месте. – Deonis 3 янв '13 в 12:00
Это же не единственный ресур в инете. Потратил целых две минуты:
-
Ты просто гуру интернета ! я блин два дня просрал чтоб этот единственный стухший найти))) – Kirpich643 2 янв '13 в 13:17
-
@Kirpich643, правильно составленный запрос в поисковике и никакой магии или гуру )) – Deonis 2 янв '13 в 13:30
-
здесь то что вы по находили все при помощи jQuery... Это мне не подходит (((((((( – Kirpich643 2 янв '13 в 14:23
Есть очень хороший, универсальный jQuery плагин Select2 с широкими возможностями.
-
1В вопросе указано - не jQuery. Не забывайте, что JavaScript не исчерпывается jQuery – tutankhamun 11 авг '15 в 7:47