Як за допомогою CSS оформити кнопку введення і відправки даних?

Question

Ще

Джерело Non AMP-version Редагувати

Як за допомогою 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

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

Джерело Non AMP-version Редагувати

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 є однією з таких бібліотек.