Làm cách nào để tạo kiểu đầu vào và gửi nút bằng CSS?

Tôi đang học CSS. Làm cách nào để tạo kiểu đầu vào và gửi nút bằng CSS?

Tôi đang cố gắng tạo ra một cái gì đó như thế này nhưng tôi không biết làm thế nào để làm

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

http://jsfiddle.net/vfUvZ/

Đây là điểm khởi đầu

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

Chỉ cần tạo kiểu nút Gửi của bạn giống như bạn tạo kiểu cho bất kỳ phần tử html nào khác. bạn có thể nhắm mục tiêu loại yếu tố đầu vào khác nhau bằng cách sử dụng bộ chọn thuộc tính CSS

Ví dụ bạn có thể viết

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

Kết hợp với các bộ chọn khác

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

Đây là một ví dụ hoạt động

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

Tôi sẽ đề nghị thay vì sử dụng

<input type='submit'>

sử dụng

<button type='submit'>

Nút được giới thiệu đặc biệt mang phong cách CSS trong tâm trí. Bây giờ bạn có thể thêm hình nền gradient cho nó hoặc tạo kiểu cho nó bằng cách sử dụng gradient CSS3.

Đọc thêm về cấu trúc biểu mẫu HTML5 tại đây

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

Chúc mừng! .Pav

Để đảm bảo độ tin cậy, tôi khuyên bạn nên đặt tên lớp hoặc ids cho các thành phần để tạo kiểu (lý tưởng là classcho đầu vào văn bản, vì có lẽ sẽ có một số) và idnút gửi (mặc dù classcũng sẽ hoạt động):

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

Với CSS:

.textInput {
    /* styles the text input elements with this class */
}

#submitBtn {
    /* styles the submit button */
}

Đối với các trình duyệt cập nhật hơn, bạn có thể chọn theo các thuộc tính (sử dụng cùng một HTML):

.input {
    /* styles all input elements */
}

.input[type="text"] {
     /* styles all inputs with type 'text' */
}

.input[type="submit"] {
     /* styles all inputs with type 'submit' */
}

Bạn cũng có thể chỉ sử dụng các tổ hợp anh chị em (vì các kiểu nhập văn bản để tạo kiểu dường như luôn tuân theo một labelphần tử và trình gửi đi theo một textarea (nhưng điều này khá dễ vỡ)):

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 phần tử biểu mẫu được kiểm soát phần nào bởi trình duyệt và hệ điều hành, do đó, việc tạo kiểu cho chúng rất đáng tin cậy theo cách mà nó trông giống nhau trong tất cả các kết hợp trình duyệt / HĐH thông thường.

Thay vào đó, nếu bạn muốn một cái gì đó cụ thể, tôi khuyên bạn nên sử dụng một thư viện cung cấp cho bạn các yếu tố hình thức có thể tạo kiểu. Uniform.js là một thư viện như vậy.

Khi tạo kiểu đầu vào, hãy sử dụng mã sau đây.

   input[type=submit] {
    background-color: pink; //Example stlying
    }

Trên thực tế, điều này quá hoạt động tuyệt vời.

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

Tôi đã làm theo cách này dựa trên các câu trả lời được đưa ra ở đây, tôi hy vọng nó có ích

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

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>

Kiểu 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;
}

Rất đơn giản:

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

Đây là làm việc tôi đã thử nghiệm.