Регистрация    Вход    Форум    Поиск    FAQ

  •  Новости
  • Beeline + Twitter = чирикай через SMS!

    Beeline + Twitter = чирикай через SMS! На первой картинке обозначены команды, при помощи которых через SMS Вы сможете кого-либо зафолловить или же отписаться, ретвитнуть чей-либо пост или же написать личное сообщение.

    Open Graph Protocol. От создателей Facebook

    Open Graph Protocol. От создателей Facebook Разбираясь с Facebook API, случайно наткнулся на другую интересную разработку от этих людей.

    Глобальное ускорение Wordpress

    Глобальное ускорение Wordpress Не считая очевидных решений типа отключения некоторых плагинов и перехода на тему попроще, я вижу 2 пути для оптимизации: кэширование и сжатие траффика.




  •  Часы


  •  Поиск

Optimaze » Программирование » Селекторы (selectors) для тега INPUT




Селекторы (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, но о них расскажу в следующей статье.



    Рейтинг: 4.5/5, основан на 25 голосах.


    Нравится



    Вернутся назад


       

    Вам будет интересно:

    Excelsior Jet Roadmap

    Компания Excelsior представила предварительный roadmap выпуска своих продуктов.

    WordPress – CSS в постах

    Так как через wp-admin дописать CSS в шапку поста невозможно, приходится извращатся.

    Организация навигации по сайту

    Всем передвижением по сайту управляет два GET – параметра, передаем мы их в адресной строке, как известно.

    Android - Работа с базой данных (часть 2)

    В последний раз мы прошли такую себе мини-лекцию по базам. Сегодня время пришло заняться практикой.



    •  Публикации


    8 методов раскрутки своего форума с нуля

    8 методов раскрутки своего форума с нуля Итак, у вас имеется свой собственный форум, но его никто не посещает? Мы готовы помочь вам справиться с этой нелегкой проблемой.

    Как привлекать посетителей на проект

    Как привлекать посетителей на проект Данная статья в основном рассчитана на тех, кто самостоятельно занимается продвижением своего проекта.

    Про MySQL, серверы и PayPal

    Про MySQL, серверы и PayPal Проклял все настройки кодировок, проклял DirectAdmin и еле-еле нашел то место где располагается и задается общий пароль для ...

    Реклама в Твиттере. Как подать свой продукт

    Реклама в Твиттере. Как подать свой продукт Твиттер уже давно стал из нового web 2. 0 сервиса рекламной площадкой с огромным количеством потенциальных пользователей ...

    Пока блог на локалхосте

    Пока блог на локалхосте Самое время кратко описать, чем нам придется заниматься. Прежде всего нужно понять, что блог ты будешь делать для получения ...

    Авторитет блоггера притягивает

    Авторитет блоггера притягивает Долго не знал с чего начать данную статью. Статья что-то типа мыслей вслух и философии.