Как задать стиль для input с type=button
Originally published at Sribna. Please leave any comments there.
Не так давно, один мой коллега обратился ко мне с вопросом как задать стиль лишь для input c type равным button. Может быть, кому-то эта информация покажется тоже интересной, поэтому, пишу на блоге.
Для того чтобы сделать отдельный стиль для элемента, достаточно знать селекторы css или, хотя бы, знать где на них посмотреть. Воочию увидеть их можно в спецификации CSS 2.
Вдоволь насмотревшись на спецификацию, можно прийти к выводу, что в данном случае нам бы помог этот селектор:
PLAIN TEXT
CSS:
-
/* для примера изменим стиль, ширину и цвет границы */ -
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 файл и не травмировать психику других браузеров.
PLAIN TEXT
HTML:
-
rel="stylesheet" href="http://blog.sribna.com/ie6.css" type="text/css" /><![endif]-->
А в самом css файле для IE6 воспользуемся другой разработкой Майкрософта, css expressions.
PLAIN TEXT
CSS:
-
input {border: expression( this.type=="button" ? 'solid 1px #000' : 'inherit' );}
После этих несложных манипуляций в IE 6 кнопка будет выглядеть следующим образом:
Что хотелось бы сказать напоследок? Скажу, что expressions замедляют работу браузера. Об их оптимизации можно почитать у Павла Корнилова, а также у Юрия Артюха.