Есть ли какое-либо (shadow?) Свойство css для разметки текста при вводе ввода?

Question

В Firefox добавляется дополнительный интервал вокруг значения текста (не только вертикальный пробел, как в случае с высотой строки, но и горизонтальный).

Chrome, Opera (имеет немного другую проблему с высотой строки), и даже IE все отображают кнопки отправки без добавления дополнительного пространства.

http://jsfiddle.net/jswartwood/aFCwj/

Если вы откроете firebug и наведите курсор мыши на и соответственно, вы увидите, что это не заполнение и т. Д.

Из звука средства отслеживания ошибок кажется, что Firefox помещает "блок" в эти элементы формы?!?! Если это правда, почему? Это делает визуальный размер кнопки очень трудно поддерживать постоянным.

Answer 1

После копания в исходном коде Firefox ( layout / style / forms.css ) я обнаружил ::-moz-focus-inner как нужный мне теневой селектор.

Я все еще не согласен с тем, что Mozilla выбрала высоту строки, но это уже другая история; в то же время я могу нормализовать все браузеры, установив высоту строки: нормальная.

input::-moz-focus-inner {
  padding: 0;
  border: 0;
}

Рабочий пример: http://jsfiddle.net/jswartwood/aFCwj/14/

Answer 2

Кнопка не обязательно должна быть кнопкой.Вы можете использовать любой другой элемент, например a в вашем примере, или даже лучше span.И привяжите это событие клика, чтобы отправить вашу форму.

Answer 3

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

Каждый браузер отображает эти элементы по-своему.Кнопки проводника соответствуют Windows.Кнопки Safari соответствуют стилю Mac.Firefox, Chrome, Opera и т. Д. Будут делать свое дело.

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

Просто замените код кнопки отправки на следующий ...

<input type="image" src="myButtonImage.jpg" alt="" />

При желании вы можете использовать CSS Sprites или JavaScript для смены изображений кнопок при наведении, нажатии и т. д.