Задаем стиль только для элемента ввода текста

Допустим, что вам надо определить для полей ввода текста следующий вид:

Задача легко решается с помощью следующих правил:

input {
    border: 5px solid white;
    -webkit-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    -moz-box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    box-shadow:
      inset 0 0 8px  rgba(0,0,0,0.1),
            0 0 16px rgba(0,0,0,0.1);
    padding: 15px;
    background: rgba(255,255,255,0.5);
    margin: 0 0 10px 0;
}

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

Задача решается легко. Зададим ограничение для использования стилей только на полях ввода текста!

input[type=text] {
   /* Прелестные стили */
}

Но дальнейшее развитие событий приводит вас к решению использовать новые типы HTML5 для элементов ввода. Такие элементы удобнее, лучше поддерживают мобильные приложения, повышают удобство использования вашего проекта. Это type=email, type=url, type=tel, type=number, type=color, и много других типов! Они приводят к появлению громоздкого кода...

input[type=text],
input[type=url],
input[type=tel],
input[type=number],
input[type=color],
input[type=email], {
   /* И это еще не все типы перечислены... */
}

Что же делать? Использовать CSS3 и селектор :not(). То есть, вместо включения всех новых типов, мы исключим те, которые не нуждаются в использовании задаваемых стилей:

input:not([type=submit]):not([type=file]) {
   /* так будет намного лучше */
}


Теперь наша форма ввода выглядит подобающим образом.

Но есть одна задачка. IE не поддерживает селектор :not() в версиях меньше 9, которые используются еще очень многими посетителями сайтов. Да, это засада. Однако для нее тоже есть обходной маневр - использовать IE.js:

<!--[if lt IE 9]>
<script src="/lessons/les973/http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

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

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/zQwAeQrBKEM/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Задаем стиль только для элемента ввода текста | | 2012-06-29 06:31:43 | | Статьи Web-мастеру | | Допустим, что вам надо определить для полей ввода текста следующий вид:Задача легко решается с помощью следующих правил:input { border: 5px solid white; -webkit-box-shadow: inset 0 0 8px rgba(0,0,0,0 | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: