NoNaMe :: [CSS] Маленькая техника "скрытия" элемен

Вообще, уверен, все знаем как скрыть элемент со страницы, display:none; и все готово. Однако, столкнулся с такой вот интересной задачкой. Допустим, что есть <select> элемент, примерно следующий....

Но при выборе "По паролю" форма перестраивается в нечно вроде...

т.е. грубо говоря <select> элемент уменьшается в размерах и появляется поле ввода пароля... Дак вот =) Собственно, как это, на мой взгляд, проще и гибче сделать...

----------------------<cut>----------------------

Конечно, на первый взгляд кажется что JS&#96ом сокращаем размер селекту, display:block; к полю пароля и все, все счастливы. Ан нет.... Как оказалось IE, FF и Opera выставляют разные паддинги и отсуты для <select> элементов итп, а хочется то сделать чтобы все было ровно. Чтобы при выборе "По паролю" поле пароля не выскакивало в IE на 3-4 пикселя итп. Конечно, в JS скрипте можно проверить браузер и в зависимости от него выставлять размеры селекта, но не проще ли заранее прописать их в CSS? Т.е. все, я думаю, давно знаем о возможности применения отдельных стилей под IE, путем

<link rel="stylesheet" type="text/css" media="all" href="http://www.nnm.ru/css/default/screen.css" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="http://www.nnm.ru/css/default/ie.css" />
<![endif]-->

Соответственно, все что нам нужно от JS, это лишь:

<select onchange="if(this.value=='4'){this.parentNode.className='pass';}else{this.parentNode.className='';}">
  .... .... ... 
  <option value="4">Виден только по паролю</option>
</select>

Вот и все... теперь прописываем в стиль display:none; для поля пароля и display:block; для .pass поля пароля. Соответственный стиль для длинны .pass селекта. Для IE свой, для остальных свой.
Таким образом мы намного гибче меняем размеры селекта (ну не знаю... спорный вопрос, но я считаю что CSS&#96ом это делать все же гибче) и максимально сокрощаем JS код на странице. Конечный код будет выглядеть примерно так:

select.html

<div id="select">
  <select onchange="if(this.value=='4'){this.parentNode.className='pass';}else{this.parentNode.className='';}">
    ... ... ...
    <option value="4">Виден только по паролю</option>
  </select>
  <input type="text" value="пароль" />
</div>

style.css

#select select{
  width:300px;
}
#select input{
  width:50px;
  display:none;
}
#select.pass select{
  width:245px;
}
#select.pass input{
  display:block;
}

и нужный стиль под IE.
Собственно все =)))

Источник: http://nnm.ru/blogs/Trinux/css_malenkaya_tehnika_skrytiya_elementov/