Как задать стиль для input с type=button
June 4th, 2008 by Yuriy DrozdovНе так давно, один мой коллега обратился ко мне с вопросом как задать стиль лишь для input c type равным button. Может быть, кому-то эта информация покажется тоже интересной, поэтому, пишу на блоге.
Для того чтобы сделать отдельный стиль для элемента, достаточно знать селекторы css или, хотя бы, знать где на них посмотреть. Воочию увидеть их можно в спецификации CSS 2.
Вдоволь насмотревшись на спецификацию, можно прийти к выводу, что в данном случае нам бы помог этот селектор:
-
/* для примера изменим стиль, ширину и цвет границы */
-
input[type="button"] {border:solid 1px #000;}
Получим такую картину:
- Firefox 2
- Opera 9.27
- Safari 3.1.1
- IE 6
- IE 7
Как видно из рисунков выше, все браузеры подхватили стили для селектора, кроме IE6. Но и это не вопрос. Воспользуемся разработками Майкрософт для IE. А именно, условными комментариями, для того чтобы вынести css код для IE6 в отдельный css файл и не травмировать психику других браузеров.
-
<!--[if IE 6]><link rel="stylesheet" href="http://blog.sribna.com/ie6.css" type="text/css" /><![endif]-->
А в самом css файле для IE6 воспользуемся другой разработкой Майкрософта, css expressions.
-
input {border: expression( this.type=="button" ? 'solid 1px #000' : 'inherit' );}
После этих несложных манипуляций в IE 6 кнопка будет выглядеть следующим образом:
Что хотелось бы сказать напоследок? Скажу, что expressions замедляют работу браузера. Об их оптимизации можно почитать у Павла Корнилова, а также у Юрия Артюха.
Похожие статьи:
- Нет похожих статей
Или так:
input { scrollbar-face-color: expression(runtimeStyle.scrollbarFaceColor = '#fff', className = (className) ? ' type-'+type : 'type-'+type) }А потом дописать к правилу:
input[type="button"],input.type-button {…
Да, так, наверное, будет предпочтительнее, не прийдется для каждого свойства делать проверку.
И css только в одном месте править.
ИМХО, проще прописать отдельный класс и везде его использовать для инпута, где это требуется. В данном случае для input c type равным button.
input.btn {
border:solid 1px #000;
}
Ато этот ИЕ6… Лишний головняк.
Хотя, на вкус и цвет…
Блин, теги порезало, но, я думаю, вы поняли, что я имел в виду)
А если это готовый проект и заказчику захотелось поменять вид кнопок, искать по всему проекту type=button и прописывать класс?
Разве что только в этом случае. Но обычно адекватные клиенты очень редко меняют дизайн, поэтому…
Хоть я и не увлекаюсь версткой, но эту заметку добавил в закладки.
Мда….
Для нормальных браузеров много можно чего сделать через css не используя классы. Но каждый раз нагружая IE 6 экспрешеном??? Это вы считаете хороший выход? я понимаю ещё expression для min-width/max-width, но использовать его по каждому удобному случаю….
в данном случае другого выхода нет, экспрешн - необходимое зло.
Как задать стиль для input с type=button…
Не так давно, один мой коллега обратился ко мне с вопросом как задать стиль лишь для input c type равным button. Может быть, кому-то эта информация п…
По мне так нормальный вариант, хоть и юзается expression. Так что использовать можно, спасибо за полезную информацию!