Стили кнопок "отправить"

Мне интересно, знает ли кто-нибудь, почему стиль "по умолчанию" кнопки "отправить" выглядит довольно неплохо (углы слегка закруглены, некоторый градиент сверху вниз и т.д.), но в тот момент, когда я добавляю фоновый цвет, он изменяется на квадратная кнопка эпохи 1990 года с границей 2px... просто выглядит ужасно.

Могу ли я как-то сохранить большую часть стиля по умолчанию, но изменить цвет фона? Спасибо!

ОТВЕТЫ

Ответ 1

Ваш (современный) браузер (или css framework, такой как bootstrap) содержит стиль по умолчанию для кнопок отправки (так что он будет выглядеть "pretty good (corners slightly rounded, some gradient from top to bottom, etc.)", а не как кнопки 1990 года).

Когда вы переопределяете эти градиенты в своем css (изменяя background-color), вы переопределяете эти запрограммированные значения по умолчанию, используемые браузером. Вместо того, чтобы менять цвет фона, вы можете сделать свой собственный красивый градиент. И, как указано в комментариях @ŠimeVidas, изменение цвета фона также приведет к удалению по умолчанию border-style.

Я бы рекомендовал использовать генератор градиентов вместо простого изменения background-color.

Ответ 2

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

Я советую вам использовать фреймворк, например jQuery UI или Bootstrap, чтобы создать свои кнопки. Это намного проще, и вы достигнете вероятных лучших результатов, чем поиск собственного фонового градиента для ваших кнопок.

Ответ 3

Браузеры имеют большой набор стилей по умолчанию, чтобы все выглядело красиво, если стили не заданы веб-сайтом. Например, Firefox имеет следующие стили, определенные для кнопки отправки по умолчанию:

input[type="submit"] {
    -moz-appearance: button;
    -moz-binding: none;
    -moz-box-sizing: border-box;
    -moz-user-select: none;
    background-color: buttonface;
    border: 2px outset buttonface;
    color: buttontext;
    cursor: default;
    font: -moz-button;
    line-height: normal;
    padding: 0 6px;
    text-align: center;
    text-shadow: none;
    white-space: pre;
}

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