Я изучаю CSS. Как стиль ввода и отправки кнопки с помощью CSS?
Я пытаюсь создать что-то подобное, но я понятия не имею, как это сделать
<form action="#" method="post">
Name <input type="text" placeholder="First name"/>
<input type="text" placeholder="Last name"/>
Email <input type="text"/>
Message <input type="textarea"/>
<input type="submit" value="Send"/>
</form>
Здесь начальная точка
CSS
input[type=text] {
padding:5px;
border:2px solid #ccc;
-webkit-border-radius: 5px;
border-radius: 5px;
}
input[type=text]:focus {
border-color:#333;
}
input[type=submit] {
padding:5px 15px;
background:#ccc;
border:0 none;
cursor:pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Вы можете стилизовать кнопки "Отправить", например, стиль любого другого элемента html. вы можете настраивать различные типы элементов ввода с помощью селектора атрибутов CSS
В качестве примера вы можете написать
input[type=text] {
your style goes here.....
}
input[type=submit] {
your style goes here.....
}
textarea{
your style goes here.....
}
Вот рабочий Пример
HTML
<input type="submit" name="submit" value="Send" id="submit" />
CSS
#submit {
color: #fff;
font-size: 0;
width: 135px;
height: 60px;
border: none;
margin: 0;
padding: 0;
background: #0c0 url(image) 0 0 no-repeat;
}
Я бы предложил вместо
<input type='submit'>
использовать
Кнопка
<button type='submit'>
была введена специально с учетом стилей CSS. Теперь вы можете добавить к нему графическое изображение градиента или создать его с помощью градиентов CSS3.
Подробнее о структуре форм HTML5 читайте здесь
http://www.w3.org/TR/2011/WD-html5-20110525/forms.html
Ура! .Pav
Для надежности я предлагаю присвоить именам классов или id элементам стиля (в идеале a class для текстовых входов, так как предположительно будет несколько) и id для отправки (хотя a class будет работать также):
<form action="#" method="post">
<label for="text1">Text 1</label>
<input type="text" class="textInput" id="text1" />
<label for="text2">Text 2</label>
<input type="text" class="textInput" id="text2" />
<input id="submitBtn" type="submit" />
</form>
С CSS:
.textInput {
/* styles the text input elements with this class */
}
#submitBtn {
/* styles the submit button */
}
Для более современных браузеров вы можете выбрать атрибуты (используя тот же HTML):
.input {
/* styles all input elements */
}
.input[type="text"] {
/* styles all inputs with type 'text' */
}
.input[type="submit"] {
/* styles all inputs with type 'submit' */
}
Вы также можете использовать комбинаторы (поскольку входы текста в стиль всегда следуют за элементом label, а submit следует текстовому пространству (но это довольно хрупко)):
label + input,
label + textarea {
/* styles input, and textarea, elements that follow a label */
}
input + input,
textarea + input {
/* would style the submit-button in the above HTML */
}
Элемент формы элемента UI несколько контролируется браузером и операционной системой, поэтому нет ничего тривиального в том, чтобы стилизовать их очень надежно таким образом, чтобы он выглядел одинаково во всех общих комбинациях браузера/ОС.
Вместо этого, если вы хотите что-то конкретное, я бы рекомендовал использовать библиотеку, которая предоставляет вам стилизованные элементы формы. uniform.js - одна из таких библиотек.
При моделировании ввода типа submit используйте следующий код.
input[type=submit] {
background-color: pink; //Example stlying
}
Собственно, это тоже отлично работает.
input[type=submit]{
width: 15px;
position: absolute;
right: 20px;
bottom: 20px;
background: #09c;
color: #fff;
font-family: tahoma,geneva,algerian;
height: 30px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
border: 1px solid #999;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<a href="#" class="btn">Push</a>
</div>
</body>
</html>
CSS стиль
a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;
background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */
box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
}
Очень просто:
<html>
<head>
<head>
<style type="text/css">
.buttonstyle
{
background: black;
background-position: 0px -401px;
border: solid 1px #000000;
color: #ffffff;
height: 21px;
margin-top: -1px;
padding-bottom: 2px;
}
.buttonstyle:hover {background: white;background-position: 0px -501px;color: #000000; }
</style>
</head>
<body>
<form>
<input class="buttonstyle" type="submit" name="submit" Value="Add Items"/>
</form>
</body>
</html>
Это работа, которую я тестировал.
Я сделал это так, основываясь на приведенных здесь ответах, надеюсь, что это поможет
.likeLink {
background: none !important;
color: #3387c4;
border: none;
padding: 0 !important;
font: inherit;
cursor: pointer;
}
.likeLink:hover {
background: none !important;
color: #25618c;
border: none;
padding: 0 !important;
font: inherit;
cursor: pointer;
text-decoration: underline;
}