Bagaimana cara memberi masukan dan mengirim tombol dengan CSS?

146

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>

masukkan deskripsi gambar di sini

pengguna2307683
sumber
8
Anda dapat mendesainnya seperti Anda akan menata elemen lain
Explosion Pills
6
Hal penting yang perlu diperhatikan, Anda tidak dapat mendesainnya seperti halnya elemen lainnya. <input>tag tidak mendukung hal-hal seperti ::after.
JamEngulfer
3
Benar. Itu sebabnya saya pikir itu lebih baik digunakan <button type="submit"><span>Send</span></button>. Anda dapat menggunakan ::afterpada span-tag.
kunambi

Jawaban:

215

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; 
}
Nick R
sumber
67

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

Ini berhasil kemarin.
sumber
25

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; 
}
Jayram
sumber
17

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

Pav
sumber
1
Ini sangat membantu, karena Safari untuk iOS dengan benar menerapkan gaya saya ke tombol, tetapi tidak untuk <input type = "submit"> :)
CrushedPixel
Tetapi kemudian Anda tidak dapat menentukan nilai sebagai teks pada tombol, melainkan sebagai teks di antara tag tombol <button> TEXT </button>
Uzebeckatrente
4

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 */
}
David mengatakan mengembalikan Monica
sumber
4

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.

eis
sumber
@BalinKingOfMoria terlihat seperti itu, ya. Saya memperbarui tautan.
eis
1

Saat menata tipe input, kirim menggunakan kode berikut.

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

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;
             }
Mpairwe Humphrey
sumber
Ini benar-benar mengerikan
Ratbert
1

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;
    }
Danilo Venegas
sumber
0

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;
}
karthi
sumber
2
Bagaimana cara menggunakan ini seperti mengirimkan masukan?
user2307683
0

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.

Saikat Chakraborty
sumber