Как да стилизираме бутона за въвеждане и изпращане с CSS?

Question

Още

Източник Не AMP-версия Редактиране на

Как да стилизираме бутона за въвеждане и изпращане с 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

Направете юни 2013 в 10:44

17 изгледи

Monkey D Luffy · Answer 1 · 2013-06-11T10:48:12+00:00

Просто оформете бутона за изпращане, както бихте оформили всеки друг 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]

Jayram · Answer 2 · 2013-06-11T10:46:40+00:00

Jayram

Източник Не AMP-версия Редактиране на

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

23

0

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

eis · Answer 3 · 2013-06-11T10:47:32+00:00

Потребителският интерфейс на елементите на формата се контролира до известна степен от браузъра и операционната система, така че не е тривиално да се стилизират много надеждно по начин, който да изглежда еднакво във всички често срещани комбинации от браузъри и операционни системи.

Вместо това, ако искате нещо специфично, бих ви препоръчал да използвате библиотека, която ви предоставя стилизирани елементи на формуляри. Една такава библиотека е uniform.js.