Bagaimana cara memberi masukan dan mengirim tombol dengan CSS?

Saya sedang belajar CSS. Bagaimana cara memberi masukan dan mengirim tombol dengan CSS?

Saya mencoba membuat sesuatu seperti ini tetapi saya tidak tahu bagaimana melakukannya

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

Inilah titik awalnya

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

Cukup gaya tombol Kirim Anda seperti Anda akan gaya elemen html lainnya. Anda dapat menargetkan berbagai jenis elemen input menggunakan pemilih atribut CSS

Sebagai contoh Anda bisa menulis

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

Kombinasikan dengan penyeleksi lainnya

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

Berikut adalah contoh yang berfungsi

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

Saya sarankan daripada menggunakan

<input type='submit'>

menggunakan

<button type='submit'>

Tombol diperkenalkan secara khusus dengan mengingat gaya CSS. Anda sekarang dapat menambahkan gambar latar belakang gradien atau gaya itu menggunakan gradien CSS3.

Baca lebih lanjut tentang struktur formulir HTML5 di sini

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

Bersulang! .Pav

Untuk keandalan saya sarankan memberikan nama kelas, atau idelemen untuk gaya (idealnya a classuntuk input teks, karena mungkin akan ada beberapa) dan idke tombol kirim (meskipun a classakan bekerja juga):

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

Dengan CSS:

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

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

Untuk peramban terbaru lainnya, Anda dapat memilih berdasarkan atribut (menggunakan HTML yang sama):

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

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

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

Anda juga bisa menggunakan kombinator saudara (karena input teks ke gaya tampaknya selalu mengikuti labelelemen, dan kiriman mengikuti textarea (tapi ini agak rapuh)):

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 */
}

bentuk elemen UI agak dikontrol oleh browser dan sistem operasi, sehingga tidak sepele untuk gaya mereka sangat andal dengan cara yang akan terlihat sama di semua kombinasi browser / OS umum.

Sebagai gantinya, jika Anda menginginkan sesuatu yang spesifik, saya akan merekomendasikan untuk menggunakan pustaka yang memberikan Anda elemen formulir yang dapat diubah. uniform.js adalah salah satu perpustakaan tersebut.

Saat menata tipe input, kirim menggunakan kode berikut.

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

Sebenarnya, ini juga berhasil.

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

Saya melakukannya dengan cara ini berdasarkan jawaban yang diberikan di sini, saya harap ini membantu

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

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

Sangat sederhana:

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

Ini bekerja, saya telah menguji.