Селекторы (selectors) для тега INPUT
16.11.2007Офигенный сегодня день. Мало того, что пятница (кстати всех с пятницей), так еще и работалось сегодня потрясно. Начал на днях новый интересный проект. Обещает быть большим и серьёзным.
Началась разработка прототипа. И вот случилось то, что собственно давно должно было случиться. Мне мой 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, но о них расскажу в следующей статье.
За сим откланяюсь…
Хотите почитать позже? Добавьте в социальные сети или закладки
