Как придать стиль кнопке ввода и отправки с помощью CSS?

Я изучаю 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>

Программирование
html css
11-го июня 2013 в 10:44
42 просмотров
Комментарии к вопросу (4)

[http://jsfiddle.net/vfUvZ/][1]

Здесь'с отправной точки

Усс:

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; 
}
Dave
Редактировал ответ 9-го ноября 2015 в 1:21
Комментарии (0)

Просто придайте кнопке Submit такой же стиль, как и любому другому html-элементу. Вы можете выбрать различные типы элементов ввода с помощью CSS-селектора атрибутов.

В качестве примера вы можете написать

input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

Комбинировать с другими селекторами

input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

Вот работающий [Пример][1]

Monkey D Luffy
Редактировал ответ 7-го августа 2018 в 6:05
Комментарии (0)

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; 
}
Комментарии (0)

Я бы предложил вместо использования

в <тип входного=&#39;отправить&#39;>

использовать

в <кнопка тип=&#39;отправить&#39;>

Кнопка была введена специально подшипника CSS стиль в виду. Теперь можно добавить градиент, фоновое изображение или стиль его с помощью CSS3 градиентов.

Подробнее о структуре форм HTML5 здесь

http://www.w3.org/TR/2011/WD-html5-20110525/forms.html

Ура! .ПАВ

Комментарии (2)

Пользовательский интерфейс элементов формы в некоторой степени зависит от браузера и операционной системы, поэтому нетривиально надежно стилизовать их таким образом, чтобы они выглядели одинаково во всех распространенных комбинациях браузера и ОС.

Если вам нужно что-то конкретное, я бы рекомендовал использовать библиотеку, которая предоставляет вам стилизуемые элементы форм. uniform.js - одна из таких библиотек.

eis
Редактировал ответ 17-го сентября 2017 в 7:42
Комментарии (2)

Для надежности я'd предлагает давать класса-имена, или идентификаторы элементов стиля (в идеале "класс" текст-входы, поскольку есть, вероятно, несколько) и идентификатор для кнопки "отправить" (хотя "класс" так же будет работать):


    Text 1
    <input type="text" class="textInput" id="text1" />
    Text 2
    <input type="text" class="textInput" id="text2" />
    <input id="submitBtn" type="submit" />

С помощью 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' */
}

Вы могли бы также просто использовать одноуровневый комбинаторы (поскольку текст-входы в стиле, кажется, всегда следуют метка элемент, и представить следующие компонент textarea (но это достаточно хрупкий)):

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 */
}
Комментарии (0)

Я сделал это так, исходя из ответов, приведенных здесь, я надеюсь, что это помогает

.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;
    }
Комментарии (0)

При укладке тип входного представить с помощью следующего кода.

   input[type=submit] {
    background-color: pink; //Example stlying
    }
Комментарии (0)

Фактически, это тоже отлично работает.

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;
             }
Sushil Sharma
Редактировал ответ 20-го октября 2015 в 12:54
Комментарии (1)

HTML-код




<meta charset="utf-8" />
CSS3 Button



<div id="container">
<a href="#" class="btn">Push</a>
</div>

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;
}
Комментарии (1)

Очень просто: 





.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; }




<input class="buttonstyle" type="submit" name="submit" Value="Add Items"/>

Это работает я проверил.

Комментарии (0)