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>
<input>
tag tidak mendukung hal-hal seperti::after
.<button type="submit"><span>Send</span></button>
. Anda dapat menggunakan::after
padaspan
-tag.Jawaban:
http://jsfiddle.net/vfUvZ/
Inilah titik awalnya
CSS:
sumber
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
Kombinasikan dengan penyeleksi lainnya
Berikut adalah contoh yang berfungsi
sumber
HTML
CSS
sumber
Saya sarankan daripada menggunakan
menggunakan
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
Bersulang! .Pav
sumber
Untuk keandalan saya sarankan memberikan nama kelas, atau
id
elemen untuk gaya (idealnya aclass
untuk input teks, karena mungkin akan ada beberapa) danid
ke tombol kirim (meskipun aclass
akan bekerja juga):Dengan CSS:
Untuk peramban terbaru lainnya, Anda dapat memilih berdasarkan atribut (menggunakan HTML yang sama):
Anda juga bisa menggunakan kombinator saudara (karena input teks ke gaya tampaknya selalu mengikuti
label
elemen, dan kiriman mengikuti textarea (tapi ini agak rapuh)):sumber
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.
sumber
Saat menata tipe input, kirim menggunakan kode berikut.
sumber
Sebenarnya, ini juga berhasil.
sumber
Saya melakukannya dengan cara ini berdasarkan jawaban yang diberikan di sini, saya harap ini membantu
sumber
HTML
Penataan CSS
sumber
Sangat sederhana:
Ini bekerja, saya telah menguji.
sumber