select css без js

qazibum · January 21, 2012

Доброго времени суток.

Делаю select с измененным видом. Заменяю изображениями, без js, только css. Вчера придумал способ, но он не работает в chrome и opera.

Код такой

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" >
<head><style>
#mod1 {
margin:200px 0 0 350px;
padding:0;
width:250px;
height:210px;
}
#mod1 select {
border:0;
padding:5px 0 0 0;
width: 247px;
height: 27px;
background: url(bistrl3.png) 90% 0 no-repeat;
}
#mod3 {
margin:10px 0 0 0;
padding:0 0 0 7px;
background: url(bistrl1.png) 0 0 no-repeat;
}
#mod4 {
background: url(bistrl2.png) repeat-x;
width: 225px;
height: 27px;
overflow: hidden;
}
</style></head><body>

<div id="mod1"><div id="mod3"><div id="mod4">
<select class="inpbox">
<option value="">Выбрать</option>
<option value="1">1111111111111</option><option value="2">2222222222222</option><option value="3">3333333333333</option>
</select>
</div></div></div>

</body></html>

В chrome отображается очень коряво, третья и вторая картинки не видны. Третья чуть-чуть совсем.

Я загрузил архив, там 3 пикчи и html - Скачать файл prim.zip

buddah · January 21, 2012

Велосипед.

qazibum · February 4, 2012

Есть еще способы? Тот, что по ссылке не подходит.

С помощью -webkit-appearance: none; удалось объяснить хрому, а ie, opera не понимают.

Добавил div под select и задал ему

position:absolute;

margin-top:-30px;

Он прям на селекте, но он главнее селекта, т.е. селект не работает, когда нажимаешь на него.

Можно как-нибудь сделать, чтобы div был над селектом, что background работал, но чтобы селект откликался на нажатие?

Sign In

select css без js

Question

qazibum

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

buddah

Link to comment

Share on other sites

qazibum

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information