Bagaimana untuk menggayakan elemen input menggunakan CSS

CSS ialah bahasa yang digunakan untuk menggayakan halaman web. Ia boleh membantu kami mencapai pelbagai kesan pada halaman web. Dalam pembangunan web, borang adalah elemen yang sangat biasa, dan input ialah salah satu kawalan paling asas dalam borang. Dalam artikel ini, kami akan membincangkan cara menggayakan elemen input menggunakan CSS.

1. Gaya kotak input

1. Lebar dan tinggi

Melalui CSS, kami boleh menetapkan lebar dan tinggi kotak input dengan mudah. Anda boleh menggunakan atribut lebar dan ketinggian untuk menetapkan saiz kotak input, seperti berikut:

input[type="text"] {
width: 200px;
height: 30px;
}

2. Gaya sempadan

Sempadan ialah salah satu elemen yang paling biasa digunakan dalam gaya kotak input. Sifat sempadan boleh digunakan untuk menetapkan gaya sempadan kotak input.

Sebagai contoh, kod berikut menetapkan sempadan kotak input kepada garis pepejal, lebar 1 piksel dan warna kelabu:

input[type="text"] {
sempadan : 1px pepejal #aaa;
}

Kami juga boleh menetapkan sempadan kepada halimunan, supaya kotak input tidak akan mempunyai sebarang sempadan:

input[type= "teks" ] {
sempadan: tiada;
}

3. Sudut bulat dan bayang

Melalui CSS, kita juga boleh menetapkan sudut bulat dan bayang daripada kotak input. Sebagai contoh, kod berikut akan menetapkan sudut bulat kotak input kepada 5 piksel dan kesan bayang:

input[type="text"] {
border-radius: 5px;
box -bayang: 0 0 5px rgba(0,0,0,0.5);
}

4. Gaya kotak teks

Kami juga boleh menyesuaikan kotak teks elemen input. Sebagai contoh, anda boleh menetapkan warna latar belakang dan saiz fon kotak teks, serta warna teks yang dimasukkan. Berikut ialah contoh:

input[type="text"] {
font-size: 16px;
color: #333;
background-color: #f2f2f2;
}

2. Kotak radio dan gaya kotak semak

Selain kotak input teks, kotak radio dan kotak semak juga merupakan elemen yang kerap digunakan dalam borang. Kami boleh mencantikkannya melalui CSS untuk mencapai pengalaman pengguna yang lebih baik.

1. Pengubahsuaian rupa

Kemunculan butang radio dan kotak semak biasanya ditunjukkan oleh gaya lalai penyemak imbas. Walau bagaimanapun, dengan menggunakan CSS, kami boleh mengubah suai kawalan ini untuk memenuhi keperluan kami.

Pertama, kita perlu menambah peraturan CSS berikut untuk mengubah suai rupa butang radio dan kotak pilihan:

input[type="radio"], input[type="checkbox"] {
-penampilan webkit: tiada;
-penampilan moz: tiada;
rupa: tiada;
sempadan: 1px pepejal #ccc;
jejari sempadan: 50%;
lebar: 16px;
tinggi: 16px;
garis besar: tiada;
peralihan: semua 0.3s mudah masuk;
}

Kod ini akan menyembunyikan radio lalai penyemak imbas butang dan gaya kotak semak dan menukarnya kepada pekeliling.

2. Warna dan Animasi

Kami juga boleh mencantikkan lagi butang radio dan kotak semak dengan mengubah suai warna dan kesan animasinya.

Kod berikut akan menetapkan beberapa kesan animasi mudah untuk butang radio dan kotak semak:

input[type="radio"]:checked, input[type="checkbox" ]:checked {
warna latar belakang: #000;
warna sempadan: #000;
peralihan: semua 0.3s mudah masuk;
}

Kod ini Akan menambah ringkas warna latar belakang dan warna sempadan berubah apabila butang radio dan kotak semak dipilih.

3. Gaya butang

Butang ialah salah satu elemen yang paling biasa digunakan dalam bentuk. Gaya butang lalai selalunya kelihatan sangat kuno, tetapi melalui CSS, kita boleh menukar warna, fon, saiz dan atribut lain butang dengan mudah.

1. Warna Butang

Kami boleh mencantikkan butang dengan mengubah suai warna latar belakang dan warna fonnya. Kod berikut akan menambah kesan kecerunan warna latar belakang apabila butang dilegar:

butang {
latar belakang: linear-gradient(#3180b8, #1e68a2);
sempadan: tiada;
jejari sempadan: 3px;
warna: #fff;
kursor: penunjuk;
saiz fon: 16px;
padding: 8px 16px;
peralihan: semua 0.3s mudah;
}

butang:tuding {
latar belakang: linear-gradient(#1e68a2, #3180b8);
}

2. Saiz dan fon butang

Kami juga boleh mengubah suai saiz dan fon butang untuk menjadikannya kelihatan lebih moden. Kod berikut akan meningkatkan saiz teks butang dan menjadikannya tebal:

butang {
font-size: 18px;
font-weight: bold;
padding: 10px 24px;
}

Kesimpulan

Dalam pembangunan web, elemen bentuk adalah perkara biasa. Penggayaan elemen ini boleh diubah dengan mudah menggunakan CSS untuk menjadikannya kelihatan lebih moden dan cantik. Artikel ini menerangkan cara menggunakan CSS untuk menggayakan elemen input. Apabila kami menulis borang, kami boleh menyesuaikan penampilan elemen borang mengikut keperluan dan keutamaan kami menggunakan kaedah yang diterangkan dalam artikel ini.

Atas ialah kandungan terperinci Bagaimana untuk menggayakan elemen input menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!