Как добавить дополнение к <input type="button">?

Прошло несколько месяцев с тех пор, как я сделал серьезную кодировку HTML/CSS, поэтому я, вероятно, пропустил много чего, но сегодня я наткнулся на действительно странную вещь.

Когда я пытаюсь применить padding к <input type="submit">, он больше не работает. Я на 99% уверен, что смогу это сделать, но теперь кажется, что это невозможно.

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

Вот небольшая демонстрация проблемы

<input type="submit" value="Submit" style="padding: 5px 10px;">
<button type="submit" value="Submit" style="padding: 5px 10px;">Submit</button>

и как он выглядит в Google Chrome 15 на Mac

но он вообще не работает в Firefox 4

Здесь ссылка на демонстрационный источник на JSbin.com

Я бы поспорил, что это работало около 6 месяцев назад, но что-то должно было измениться. Я использовал Windows Vista и OS X Snow Leopard с недавним обновлением до Lion, но это не похоже на это.

Я что-то пропустил?

изменить: исправление опечатки НЕ помогло. Отступ по-прежнему не применяется к первой кнопке.

edit2: После прохождения Adobe Browserlab похоже, что это проблема с OS X. Я все равно хотел бы знать, как это сделать даже в OS X, хотя.

Ответ 1

Эта проблема была очевидна и для OS X Firefox. Решение состоит в том, чтобы отключить внешний вид браузера перед его применением:

input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

Дополнительная информация: http://css-tricks.com/almanac/properties/a/appearance/

Ответ 2

<input type="submit" value="Submit" style="padding: 5x 10px;">

Вы забыли p в 5px. Это нарушает стиль.

Ответ 3

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

input[type="submit"], input[type="reset"] {
    background: none repeat scroll 0 0 #8C8C69;
    border: medium none;
    cursor: pointer;
    display: inline-block;
    padding: 7px;
    text-transform: uppercase;
}