Селекторы (selectors) для тега INPUT

Началась разработка прототипа. И вот случилось то, что собственно давно должно было случиться. Мне мой CSS окончательно перестал нравится. Дело в том, что стили для написания небольших проектиков и прототипов уже давно кочевали у меня из проекта в проект и успели обрости мхом... ))) т.е. весь CSS и HTML стали убогими-убогими... В большинстве тегов в коде страницы постоянно употребляется style="" и погнали... Весь код просто усеян вставками стилей. Нехорошо...

Это собственно и подвигло к пересмотру всех наработок в этой области. А вот в этой статейке я хочу рассказать о небольшом фрагменте, который попался сегодня в руки и пригодился. Сам по себе я не HTML-кодер, но думаю мой скромный опус кому-нибудь да пригодится. Итак начнём...

Очень часто сталкиваюсь с проблемой, когда описываю тег INPUT в CSS. Дело в том, что это и text, и checkbox, и submit (плюс схожий с ним button), и radio, и image и т. д. Короче говоря, масса совершенно не похожих элементов, но с одинаковым назначением - передача данных из формы на скрипт.

А вот теперь рассмотрим ситуацию - я хочу, к примеру, описать бордер для текстового инпута и делаю так:

• INPUT {
• border:1px solid #CCCCCC;
• }

в итоге у меня получается такая лажа, при которой все чекбоксы и радиобатоны получают бордюр. Смотрится ужасно. Что делать в такой ситуации?

Есть вариант посоздавать кучу классов для каждого типа тега INPUT и использовать их. Кстати, не самый плохой вариант. Пиши себе спокойно, выноси стили в style. css и будет тебе счастье. Но не хочется этого. Поминаешь себя не хорошим словом каждый раз, когда верстаешь огромнейший прототип или немеряную админку.

Эврика!!! Сегодня нашёл решение.

Есть такая штука - называется селекторы (selectors)...

Пишем:

• input[type=submit] { border:1px solid #CCCCCC; color:#999999;}
• input[type=text] { border:1px solid #CCCCCC;}

и вуаля теперь мы можем разделять тег INPUT на типы. Как видно выше, я не описывал для тега INPUT никаких общих объявлений, а просто описал их для нужных мне типов отдельно. Может быть есть какие-нибудь и аргументы против такого метода, но в моём случае это помогло. Причём помогло в браузерах IE, FireFox, Opera...

Параллельно я использовал еще кое-какие фишки для совершенствования своего CSS, но о них расскажу в следующей статье.