Переход
;) Хейль. По-человеческие никак. Можно накладывать картинку сверху, если поместить селект в контейнер и туда же картинку. Контейнер и картинку позиционировать относительно (position: relative) и выставить картинке координаты от правого края, да заодно слой повыше (z: номер).
А как же тогда список раскрываться будет, если сверху будет контейнер с кропкой?
Ох как яс не умеет с этим работать... И есесно, надо что-то делать в наглую изменить не получится, но накрыть чем-нибудь имеющийся наверное вполне...
Но поддерживаю что писать свой на мой взгляд наиболее выгоднй вариант, так как слои не умеют закрывать эти стрелки) Проверено опытом.
это у нас не умеют, а за бугром уже научились перекрывать все что только угодно. статей много, только не помню по какой они все теме, была целая серия. подменяли как select'ы, так и input'ы и т.д. и т.п.
Перекрыть можно iframe, проблема в том, что список не раскрыть.
"http://http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>DropdownList</title>
<style>
html, body {
margin: 0;
padding: 0;
}
#s1, #if1 {
position: absolute;
top: 20px;
left: 20px;
height: 20px;
width: 200px;
}
#s1 {
z-index: 1;
}
#if1 {
border: none;
z-index: 2;
}
#ad {
position: absolute;
top: 22px;
left: 200px;
z-index: 3;
}
</style>
</head>
<body>
<form>
<select id="s1" value="o1" size="1">
<option id="o1" label="o1" value="o1">Option 1</option>
<option label="o2" value="o1">Option 2</option>
<option label="o3" value="o1">Option 3</option>
<option label="o4" value="o1">Option 4</option>
<option label="o5" value="o1">Option 5</option>
<option label="o6" value="o1">Option 6</option>
</select>
</form>
<iframe id="if1" width="0" height="0">
</iframe>
</body>
</html>
Можно, конечно, по onclick на картинке показывать свой выпадающий список, а потом записывать значение в select
http://www.picment.com/articles/css/funwithforms/
http://www.quirksmode.org/dom/inputfile.html
iframe, imho, относится к плохому стилю вёрстки, он тут непричем.
А при чем тут, вообще, стиль верстки?
Статьи, конечно, хрошие. Только вот методы, описаные в них не подходят для select. Вот пример из второй статьи применительно к input type="file" все как надо, а для select-a, работает только в FF 1.0.6, в IE 6.0 SP2 фильтр opacity не срабатывает , про Оперу умолчу ;-)
"http://http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>DropdownList</title>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
input.inp_select {
width: 180px;
}
input.file, select.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
select.file {
width: 200px;
}
</style>
</head>
<body>
<h1>Styling input & select</h1>
<h2><input type="file"></h2>
<form id="form_input">
<div id="fileinputs" class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input />
</div>
</div>
</form>
<h2><select></h2>
<form id="form_select">
<div id="fileinputs" class="fileinputs">
<select class="file" id="t_select" size="1">
<option id="o1" label="o1" value="o1">Option 1</option>
<option label="o2" value="o1">Option 2</option>
<option label="o3" value="o1">Option 3</option>
<option label="o4" value="o1">Option 4</option>
<option label="o5" value="o1">Option 5</option>
<option label="o6" value="o1">Option 6</option>
</select>
<div class="fakefile">
<input class="inp_select" />
</div>
</div>
</form>
</body>
</html>
2 Stalcer:
Так что, похоже, единственным вариантом остается заменa select-а с помощью JS. Пример замены работает в IE6, FF1.0.6 и Opera 8.01
Пользователи с отключеным JS, естественно, пойдут лесом, т.е. увидят обычный select
«Сделай сам» решает многие проблемы=) Но у меня в IE 6 SP 1 этот select растягивает родительский контейнер (в данном случае раза в три) по высоте. Нужно ли оно вообще?:)
Стиль тут при том что в браузерах до сих пор не отточена печать относительно простых html страниц, а с любыми фреймами проблем будет только больше.
Они просто могут быть отключены - вот самая большая проблема :-) А так реализация фреймов в современных браузерах нормальная.
Но у меня в IE 6 SP 1 этот select растягивает родительский контейнер (в данном случае раза в три) по высоте.
Это проблема SP1 ;-)
Нужно ли оно вообще?:)
Вообще не знаю, а в реальном проекте я бы не рискнул.
Они просто могут быть отключены - вот самая большая проблема :-) А так реализация фреймов в современных браузерах нормальная.
Ну да, а печатают их (frame, iframe) до сих пор по-разному. Хотя подогнать можно многое.
IE 6.0.2900.2180.xpsp_sp2... Не гоняюсь за его обновлениями, но сейчас вот ничего новее не нашел, а значит глючит оно в последнем Осле.
IE 6.0.2900.2180.xpsp_sp2... Не гоняюсь за его обновлениями, но сейчас вот ничего новее не нашел, а значит глючит оно в последнем Осле.
Я с первого разу просто не совсем понял о чем речь :-)
function selectReplacement(obj) {
obj.className += ' replaced';
var ul = document.createElement('ul');
ul.className = 'selectReplacement';
ul.style.position = 'absolute';
Вообще-то надо и z-index присваивать по нисходящей, а то select, расположеный ниже будет перекрывать раскрытый список.
function selectReplacement(obj, i) {
obj.className += ' replaced';
var ul = document.createElement('ul');
ul.className = 'selectReplacement';
ul.style.position = 'absolute';
ul.style.zIndex = 99-i;
function setForm() {
var s = document.getElementsByTagName('select');
for (var i=0; i<s.length; i++) {
selectReplacement(s, i);
}
}
Извращаться смысла не имеет.
Вообщем двумя строчками такое не сделаешь :)
Извращаться смысла не имеет.
Эхх, ну вот чего ж Билли Гейтс к такому выводу не пришел берясь строить свой цирк уродцев?;) Грустно:(