Jump to content
  • 0

select css без js


qazibum
 Share

Question

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

Делаю 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

Link to comment
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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

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

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

position:absolute;

margin-top:-30px;

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy