Можете ли вы стилизовать кнопки HTML-формы с помощью CSS?
Мне не нравится стиль кнопки по умолчанию. Это действительно скучно. Я использую
кнопки типа
. Могу ли я как-то стилизовать их в css? Если нет, я думаю, что другим способом сделать это было бы использовать вместо этого div и сделать его ссылкой. Как заставить их работать с формами?
- html
- css
- формы
Вы можете легко достичь желаемого с помощью CSS: —
HTML
CSS
#отправить {
цвет фона: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
радиус границы: 6px;
цвет: #fff;
семейство шрифтов: «Освальд»;
размер шрифта: 20px;
текстовое оформление: нет;
курсор: указатель;
граница: нет;
}
#отправить:наведите {
граница: нет;
фон:красный;
box-shadow: 0px 0px 1px #777;
}
ДЕМО
2
Да, это довольно просто:
input[type="submit"]{
фон: #fff;
граница: 1px сплошная #000;
тень текста: 1px 1px 1px #000;
}
Я рекомендую присвоить ему идентификатор или класс, чтобы вам было легче ориентироваться на него.
2
Да, вы можете настроить таргетинг на тех, кто специально использует input[type=submit] например.
.myFormClass input[type=submit] {
поле: 10 пикселей;
белый цвет;
цвет фона: синий;
}
1
Вы можете напрямую создать свой собственный стиль следующим образом:
input[type=button]
{
// Измените стиль по своему усмотрению
}
1
Вы можете добавить:
-webkit-внешний вид: нет;
, если вам нужно, чтобы он выглядел одинаково в Mobile Safari…
запишите приведенный ниже стиль в тот же раздел заголовка html-файла или запишите в файл .css