Изменение внешнего вида кнопок формы

Question

С этим небольшим количеством CSS мои кнопки формы теперь выглядят плоскими (2D), и мне очень нравится внешний вид:

input {
  border: 1px solid #999;
}

Однако для полей файла (выберите файл для загрузки) кнопка по-прежнему 3D. И тогда граница обходит эту кнопку и текст рядом с ней.

Я попытался исправить эту проблему, переименовав ввод в .input, а затем только применив его к моим кнопкам Submit / Cancel, но теперь они выглядят так, как выглядит поле файла. Так как мне это исправить, чтобы все они выглядели плоскими / 2D?

Кроме того, есть ли способ создать эти кнопки формы как обычные ссылки? Мне очень нравится, как они выглядят. Я программирую на Rails, поэтому было бы неплохо, если бы вы могли опубликовать вспомогательную функцию для этого, если она доступна.

Answer 1

В этой статье объясняются приятные приемы для стилизации кнопки ввода файла

Answer 2

http://extjs.com/forum/showthread.php?t=29032
Этот поток использует библиотеку ExtJS для создания кнопки ввода, которую можно стилизовать. Я бы не стал использовать ExtJS только по одной этой причине, но если вы действительно хотите пофантазировать, посмотрите на код для его кнопки файла. Вместо того, чтобы помещать кнопку файла поверх изображения и настраивать ее, пока она не будет работать хорошо, этот фрагмент Javascript фактически центрирует кнопку там, где находится ваша мышь. Позволяет создавать необычно выглядящие кнопки всех форм и размеров.

Answer 3

Чтобы создать кнопку отправки в виде обычной текстовой ссылки, вы можете прикрепить события onclick с Javascript вместо одного слова вместо кнопки отправки.