Главная > Статьи > CSS-стили для полей формы

CSS-стили для полей формы

2
12.09.2011 20:53

Давайте разберем такой нюанс как применении CSS к полям формы. Речь в частности пойдет исключительно про поля выпадающего списка select. Как известно применение CSS - стилей к этому тегу ограничено, но есть один невероятный казус по этой теме и заключается он в том, что Internet Explorer имеет более обширный ряд функций для придания стиля полю select, но рассматривать будем способ который будет подходить для всех браузеров. Суть его проста - делаем блок с тегов div по типу тега select.

<div id="block">
<div id="a-2-block">Стрижка женская</div>
<div id="a-3-block">
<div id="option-block">Стрижка женская</div>
<div id="option-block">Стрижка мужская</div>
<div id="option-block">Стрижка детская</div>
<div id="option-block">4</div>
</div>
</div>

И так по порядку:

1. div c классом block - это общий блок который будет удерживать границы всего нашего псевдо тега select.

2. div c классом 2-block - это блок который по сути и выполняет роль того постоянно видимого кусочка поля select.

3. div с классом 3-block - это блок который выполняет функцию контейнера для будущих псевдо тегов option которые являются элементами выпадающего списка.

4. div с классом otion-block - элементы поля select.

Следующим шагом будет создание того же самого поля select, всего навсего с одним элементом, так как все равно форма посылает запрос взяв значение с поля select.

<select id="some-id" style="display:none;" name="some-name">
<option id="some-option" value="1">Стрижка женская</option>
</select>

Теперь настало время javascript и CSS:

1. Сделаем контейнер псевдо элементов option скрытыми и придадим ему абсолютное позиционирование для того, что бы при раскрытие не раздвигалась следующая HTML разметка, а также скроем настоящее поле select.

#a-3-block{
position:absolute;
display:none;
width:100px;
background:#ccc;
}
#some-id{
display:none;
}

2. Далее сделаем скрипт который будет скрывать и раскрывать псевдо поле select при клике - здесь нам поможет свойство onClick=""

<script language="javascript">
function blockOpen()
{
if(document.getElementById('a-3-block').style.display == "block")
{var show = "none"}
else
{var show = "block"}
document.getElementById('a-3-block').style.display = show;
}
</script>

- в блоке a-2-block указана цифра 1 - это значение по умолчанию который сразу будет отображаться при загрузке псевдо поля select.

3. Создаем скрипт который будет изменять значение в видимой части пмевдо тега select, а также изменять значение в настоящем поле select.

<script language="javascript">
function set_value(my_html,sel_value)
{
document.getElementById('a-2-block').innerHTML = my_html;
document.getElementById('a-3-block').style.display = "none";
document.getElementById('some-option').value = sel_value;
document.getElementById('some-option').selected = true;
}
</script>

4. Итого у нас получилось:

<style media="all">
#a-2-block{background:#666; width:100px;}
#a-3-block{display:none; width:100px; background:#333;}
#some-id{display:none;}
</style>
<script language="javascript">
function blockOpen()
{
if(document.getElementById('a-3-block').style.display == "block")
{var show = "none"}
else
{var show = "block"}
document.getElementById('a-3-block').style.display = show;
}
function set_value(my_html,sel_value)
{
document.getElementById('a-2-block').innerHTML = my_html;
document.getElementById('a-3-block').style.display = "none";
document.getElementById('some-option').value = sel_value;
document.getElementById('some-option').selected = true;
}
</script>

<div id="block">
<div id="a-2-block" onClick="blockOpen()" >1</div>
<div id="a-3-block" >
<div id="option-block" title="1" onclick="set_value(this.innerHTML,this.title)">1</div>
<div id="option-block" title="2" onclick="set_value(this.innerHTML,this.title)">2</div>
<div id="option-block" title="3" onclick="set_value(this.innerHTML,this.title)">3</div>
<div id="option-block" title="4" onclick="set_value(this.innerHTML,this.title)">4</div>
</div>
</div>
<select id="some-id" name="some-name">
<option id="some-option" value="1">Стрижка женская</option>
</select>

И еще вариант, если нужно вставлять много полей select

<style media="all">
#a-2-block{background:#666; width:100px;}
#a-3-block{display:none; width:100px; background:#333; position:absolute;}
#some-id{ display:none;}
</style>
<script language="javascript">
function blockOpen(div)
{
var bigDiv = div.parentNode;
var allDiv = bigDiv.getElementsByTagName('div');
var seeDiv = allDiv.item(0);
var selectDiv = allDiv.item(1);
if(selectDiv.style.display == "block")
{var show = "none"}
else
{var show = "block"}
selectDiv.style.display = show;
}

function set_value(divOpt)
{

var daddyDiv = divOpt.parentNode.parentNode;
var allDivs = daddyDiv.getElementsByTagName('div');
var allSelect = daddyDiv.getElementsByTagName('option');
var divOne = allDivs.item(0);
var divTwo = allDivs.item(1);
var selectOne = allSelect.item(0);
divOne.innerHTML = divOpt.innerHTML;
selectOne.innerHTML = divOpt.innerHTML;
selectOne.value = divOpt.title;
divTwo.style.display = 'none';
}
</script>

<div id="block">
<select id="some-id" name="some-name">
<option value="1">1</option>
</select>
<div id="a-2-block" onClick="blockOpen(this)" >1</div>
<div id="a-3-block" >
<div title="value1" onclick="set_value(this)">1</div>
<div title="value2" onclick="set_value(this)">2</div>
<div title="value3" onclick="set_value(this)">3</div>
<div title="value4" onclick="set_value(this)">4</div>
</div>
</div>
<br/>
<br/>
<br/>
<div id="block">
<select id="some-id" name="some-name">
<option value="1">1</option>
</select>
<div id="a-2-block" onClick="blockOpen(this)" >1</div>
<div id="a-3-block" >
<div title="value1" onclick="set_value(this)">1</div>
<div title="value2" onclick="set_value(this)">2</div>
<div title="value3" onclick="set_value(this)">3</div>
<div title="value4" onclick="set_value(this)">4</div>
</div>
</div>

Twitter
Нравится
SocButtons v1.4
 

Комментарии 

 
# raskraska012 17.04.2012 09:27
Добрый день,красивое решение.Вопросик,как сделать несколько выпадающих списков select в одной форме,что-то у меня не получается,начи нают между собой перекликаться.Для своего сайта делаю.Вариант select,который поставил немного не устраивает,хочу попробовать Ваш,хотя придётся кое,что в нём изменить.
Ответить | Ответить с цитатой | Цитировать
 
 
# Roket007 17.04.2012 10:21
Просто везде стоит одна и та же функция, с одними и теми же id, можете поменять ID, но нужно будет и еще 1-ну функцию писать! Сейчас поколдую!
Ответить | Ответить с цитатой | Цитировать
 
 
# raskraska012 17.04.2012 10:27
Вроде и две функции написал и id поменял один блок работает ,а второй только открывается и ноль эмоций...пойду работать,вечеро м приду буду дальше мучать конструкцию.Спасибо.
Ответить | Ответить с цитатой | Цитировать
 
 
# Roket007 17.04.2012 10:33
Ша збадягаю!
Ответить | Ответить с цитатой | Цитировать
 
 
# Roket007 17.04.2012 11:39
Всунул в конец пример, если нужно несколько полей select на странице!
Ответить | Ответить с цитатой | Цитировать
 
 
# raskraska012 17.04.2012 22:37
<style>
#a {background:#af f333; width:100px;}
#b{display:none ; width:100px; background:#fff 666;}
.c {display:none;}
.d {display: block;}
.d:hover {background-color: #00ffff;}
</style>

<script language="javascript ">
function blockOpen()
{
if(document.getElementById( 'b').style.display == "block")
{var show = "none"}
else
{var show = "block"}
document.getElementById( 'b').style.display = show;
}
function set_value(my_ht ml)
{
document.getElementById( 'a').innerHTML = my_html;
document.getElementById( 'b').style.display = "none";
}
</script>
Ответить | Ответить с цитатой | Цитировать
 
 
# raskraska012 17.04.2012 22:37
<div id="a" onClick="blockOpen( )" >Раз</div>
<div id="b" >
<input type="radio" id="h1" class="c" name="h" value="1" checked />
<label class="d" onclick="set_value( this.innerHTML,this.title)" for="h1">Раз</label>
<input type="radio" id="h2" class="c" name="h" value="2" />
<label class="d" onclick="set_value( this.innerHTML,this.title)" for="h2">Два</label>
<input type="radio" id="h3" class="c" name="h" value="3" />
<label class="d" onclick="set_value( this.innerHTML,this.title)" for="h3">Три</label>
</div>
Ответить | Ответить с цитатой | Цитировать
 
 
# raskraska012 17.04.2012 22:42
Не удачные комментарии удалите пожалуйста и в один кусок не вместилось.Сейчас опять проблема,как в этом коде сделать много полей селект.Хотя тут я думаю смогу сам уже разобраться.
Ответить | Ответить с цитатой | Цитировать
 
 
# Roket007 18.04.2012 05:56
Я же привел пример, в конце статьи про множественное присутствие полей селект!
Ответить | Ответить с цитатой | Цитировать
 
 
# raskraska012 19.04.2012 10:30
форму с псевдо селектами сделал,на основе первого кода.спасибо.Теперь вопросик,как добавить к данной форме
input type="reset" value="Очистить"
чтоб форма обновлялась?
Ответить | Ответить с цитатой | Цитировать
 
 
# Roket007 19.04.2012 11:00
Ну сложно сказать не глядя на ваш код, можно к input type="reset" добавить onclick="dropSelect()" и по getElementById( ) в тупую вставлять нужное содержание в select-ы а вся остальная формочка сама обновится!
Ответить | Ответить с цитатой | Цитировать
 
 
# raskraska012 02.05.2012 13:29
Не работает в IE,из-за скрытия select через display:none;.Сделал работающий код в IE.
Результат: http://raskraska012.blogspot.com/2012/05/selekt.html
Думаю переделать с использованием iframe,возможно опять обращусь за помощью,а то в javascript я дуб.
Ответить | Ответить с цитатой | Цитировать
 

Добавить комментарий


Защитный код
Обновить

 

Сторонние

Модуль новостей для Joomla - JU News Ultra
14.11.2011 |  8756
Модуль вывода новостей JU News Ultra - еще один способ...

Новости

Безопасность смартфона — пин-код с текущим временем, Screen Lock – Time Password
IT мир
20.10.2014 |  1086
Любой владелец смартфона всегда с опаской вводит пин-код разблокировки, ведь...
Alien: Isolation — прими участие в фильме «Чужой»
IT мир
20.10.2014 |  962
Creative Assembly можно поздравить, впрочем, как и геймеров. Игра Alien:...
Серия «кожаных» ноутбуков от Samsung продолжается: Chromebook 2 с пассивным охлаждением
IT мир
20.10.2014 |  862
Samsung продолжило серию «одетых в кожу» ноутбуков. Новая модификация Chromebook...
3D-принтер iBox Nano — компактность, доступность и долговечность
IT мир
20.10.2014 |  939
Громоздкие и дорогие 3D-принтеры слишком медленно распространяются. Для популяризации 3D-печати...