Bagaimana untuk menyesuaikan Borang Hubungi CSS 7

Video.: Custom Input Type File Upload Button Using HTML & CSS | Styling with CSS

Kandungan

Arahan
Bagaimana
Notis
Apa yang anda perlukan

Borang Hubungi 7 adalah plugin platform penerbitan WordPress yang membolehkan pengguna untuk mencipta borang hubungan tersuai dengan cepat. Walaupun bentuk mudah dibuat dan digunakan, bidang mereka disesuaikan dengan minimum, membolehkan integrasi dengan mana-mana laman web. Buat gaya tersuai anda dan laksanakannya dalam medan borang yang dihasilkan oleh plugin ini.

Arahan

Sesuaikan gaya medan Borang 7 Borang menggunakan CSS (Comstock / Comstock / Getty Images)

Buka lembaran gaya tema WordPress anda dan tatal ke hujungnya. Buat kawasan beranotasi supaya anda boleh dengan mudah mencari kod anda. Contoh:

/ Di sinilah kod CF7 tersuai saya bermula /
Sesuaikan gaya bidang dan bidang teks anda. Untuk melakukan ini, buat entri dalam lembaran gaya anda. Contoh:

.wpcf7 input [type = "text"], .wpcf7 areadotexto {}

Tambah sempadan, latar belakang, padding, dan saiz elemen teks. Contoh:

.wpcf7 input [type = "text"] {background: none scroll scroll 0 0 # F9F9F9; sempadan: 1px pepejal # 8E9BA9; padding: 5px; lebar: 200px; }
Sesuaikan gaya drop-down dan menu pilihan.Untuk melakukan ini, buat entri dalam lembaran gaya anda. Contoh:

.wpcf7 input [type = "select"] {

}

Sesuaikan bidang pemilihan yang sama dengan medan teks. Bidang pemilihan tidak selebar dalam medan teks, jadi tambah beberapa piksel tambahan pada lebar anda. Contoh:

.wpcf7 input [type = "selected"] {background: none scroll scroll 0 0 # F9F9F9; sempadan: 1px pepejal # 8E9BA9; padding: 5px; lebar: 210px; }
Sesuaikan gaya butang penyerahan anda. Untuk melakukan ini, buat entri dalam lembaran gaya anda. Contoh:

.wpcf7 input [type = "submit"] {

}

Sesuaikan butang serah untuk melengkapkan rupa dan nuansa tapak anda (ia harus terus menonjol dari latar belakang). Contoh butang hantar merah:

.wpcf7 input [type = "submit"] {background-color: # 990000; sempadan: 4px pepejal # B34040; warna: #FFFFFF; }
Simpan perubahan dalam lembaran gaya anda dan pindahkan data ke folder tema.

Bagaimana

Cuba gaya yang berbeza dan warna sempadan yang berbeza.
Lakukan pemeriksaan baru borang di Firefox, Safari dan Internet Explorer, kerana setiap pelayar menyediakan medan input yang sedikit berbeza.

Notis

Tambah CSS tersuai pada helaian gaya tema anda dan bukan helaian gaya plugin. Jika anda melakukan ini, apabila plugin dikemas kini, penyesuaian fail dalam folder anda mungkin hilang.