Графическое оформление кнопок — 2

Апдейт к оформлению кнопок.

Неудобным местом в оформлении кнопки является одинаковое имя у всех элементов форм: input. Чтобы отличить текстовые поля от кнопок, а также флажков (чекбоксов) и переключателей (радиобаттонов), приходится снабжать их классами или придумывать обёртки (а при такой возможности проще использовать обычный графический <input type="image" />).

Однако по мере ухода со сцены IE6 появилась возможность обойтись без этих ухищрений. Теперь проблему решает селектор атрибута (иначе — селектор по атрибуту). Выглядит он так:

input[type="submit"]{
…
}

Теперь оформление кнопки (на том же примере, что и в прошлый раз) будет выглядеть так:

<form action="">
<fieldset>
<legend>Пример кнопки
<input type="text"/>
<input type="submit" value="Отправить" />
</fieldset>
</form>

<style type="text/css">
  input[type="submit"]{
   width:30px;/*Ширина картинки*/
   height:21px;/*Высота картинки*/
   padding:0 0 0 30px;
   /*Выталкивает надпись с картинки в ИЕ*/
   overflow:hidden;
   /*Обрезает кнопку до указанных размеров*/
   cursor:pointer;
   border:none;
   background:url('button.gif') no-repeat;
   /*Положить картинку фоном*/
   color:transparent;
   /*Надпись на кнопке прозрачна в ФФ и Опере*/
  }
fieldset{
   padding:50px;
   border:2px solid #3a5777;
  }
</style>

И вот результат: Пример. Не работает в IE6, но понимается современными браузерами.