Давайте разберем такой нюанс как применении 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>
Комментарии
#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>
<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>
input type="reset" value="Очистить"
чтоб форма обновлялась?
Результат: http://raskraska012.blogspot.com/2012/05/selekt.html
Думаю переделать с использованием iframe,возможно опять обращусь за помощью,а то в javascript я дуб.