Rumah > Artikel > hujung hadapan web > Bagaimana untuk memilih medan input teks menggunakan pemilih CSS?
Bagaimana untuk memilih medan input teks menggunakan pemilih CSS?
- 王林ke hadapan
- 2023-08-26 15:41:161005semak imbas
Memilih medan input teks menggunakan pemilih CSS ialah alat yang berkuasa dan penting untuk menggayakan dan menyasarkan elemen khusus pada halaman web adalah bahagian penting dalam mana-mana borang web yang memerlukan pengguna untuk memberikan input atau pereka bentuk, kita mungkin perlu memilih medan input teks menggunakan pemilih CSS untuk menggunakan penggayaan padanya Jika kita ingin menukar warna fon, warna latar belakang atau menambah gaya tersuai pada medan input, adalah penting untuk memahami cara memilihnya. menggunakan pemilih CSS.
Struktur medan input teks
Sebelum menggunakan pemilih CSS untuk memilih medan input teks, adalah penting untuk memahami strukturnya. Medan input teks biasanya diwakili oleh elemen HTML dengan atribut jenisnya ditetapkan kepada "teks". Sebagai contoh, kod HTML berikut mencipta medan input teks.
<input type="text" name="user-name" id="user-id" value="initial-value" placeholder="Enter username >
Dalam kod di atas -
type="text" menyatakan bahawa ini ialah medan input teks.
name="user-name" menetapkan atribut medan input untuk mengenal pasti input apabila borang diserahkan.
id="user-id" menetapkan atribut ID medan input, yang digunakan untuk mengenal pasti medan input untuk tujuan penggayaan dan penskripan.
value="initial-value"Tetapkan nilai awal medan input. Ini adalah pilihan dan boleh ditinggalkan.
placeholder="Masukkan nama pengguna" Tetapkan teks pemegang tempat untuk dipaparkan dalam kotak input untuk memberi pengguna gesaan input.
Pilih semua medan input teks menggunakan pemilih elemen
Cara mudah untuk memilih semua medan input teks pada halaman web adalah dengan menggunakan pemilih elemen. Medan input teks ialah elemen HTML yang membenarkan pengguna memasukkan teks, seperti nama, alamat e-mel atau kata laluan mereka. Unsur ini biasanya dibuat menggunakan teg "input" dengan atribut "jenis" ditetapkan kepada "teks", "e-mel", "kata laluan" atau "carian". Untuk memilih semua medan input teks, kami boleh menggunakan pemilih CSS berikut −
input[type="text"], input[type="email"], input[type="password"] {
/* write your CSS Code */
}
Pemilih ini menyasarkan semua medan input yang mempunyai atribut "jenis" ditetapkan kepada "teks", "e-mel" atau "kata laluan". Tanda koma antara pemilih bermakna semua pemilih akan menerima gaya yang sama.
Contoh 1: Pilih medan input teks menggunakan atribut jenis
Dalam contoh ini, kami menggunakan pemilih atribut jenis untuk memilih semua medan input teks dalam borang. Gaya CSS digunakan pada semua medan input teks dengan atribut type="text", type="email" dan type="password". Medan input ini mempunyai jidar, padding, saiz fon dan gaya jidar bawah digunakan.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
input[type="text"],
input[type="email"],
input[type="password"] {
border: 2px solid lightgray;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<h3>Selecting text input fields using type attribute</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter username"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Email ID"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your Password"><br>
</form>
</body>
</html>
Pilih medan input teks tertentu menggunakan pemilih ID
Kami boleh menggunakan pemilih ID untuk menyasarkan medan input teks tertentu. Pemilih ID diwakili oleh aksara "#", diikuti dengan nilai atribut ID elemen HTML. Sebagai contoh, jika kita mempunyai elemen HTML dengan atribut ID ditetapkan kepada "nama pengguna", kita boleh memilihnya menggunakan pemilih CSS berikut -
#username {
/* Write CSS rules here */
}
Contoh 2: Pilih medan input teks menggunakan atribut ID.
Dalam contoh ini, kami menggunakan pemilih atribut ID untuk memilih tiga kotak input teks dengan ID nama, e-mel dan kata laluan. Gaya CSS ini digunakan pada tiga kotak input. Gaya jejari sempadan dan warna latar belakang digunakan pada kotak input ini.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
input[type="text"], input[type="email"],input[type="password"] {
border: 2px solid lightgray;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
}
#name, #email{
background-color: lightgreen;
border-radius:10px;
}
</style>
</head>
<body>
<h3>Selecting text input fields using ID attribute</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter username"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Email ID"><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your Password"><br>
</form>
</body>
</html>
Pilih berbilang medan input teks menggunakan pemilih kelas
Jika kami mempunyai berbilang medan input teks dengan gaya atau fungsi yang serupa, kami boleh menggunakan pemilih kelas untuk menyasarkannya. Pemilih kelas diwakili oleh aksara ".", diikuti dengan nilai atribut kelas elemen HTML. Contohnya, jika kita mempunyai berbilang elemen HTML dengan atribut kelas ditetapkan kepada "medan input", kita boleh memilihnya menggunakan pemilih CSS berikut -
.input-field {
/* write CSS rules here */
}
Pemilih ini menyasarkan semua elemen HTML dengan atribut kelas ditetapkan kepada "medan input".
Contoh 3: Pilih medan input teks menggunakan atribut kelas
Dalam contoh ini, kami menggunakan pemilih atribut Kelas untuk memilih tiga kotak input teks dengan nama kelas nama, e-mel, dan kata laluan. Gaya CSS ini digunakan pada tiga kotak input. Gaya jejari sempadan dan warna latar belakang digunakan pada kotak input ini.
<!DOCTYPE html>
<html>
<head>
<style>
body { text-align: center; }
input[type="text"], input[type="email"], input[type="password"]{
border: 2px solid lightgray;
padding: 12px;
font-size: 18px;
margin-bottom: 15px;
}
.password, .search{
background-color: lightgreen;
border-radius:10px;
}
</style>
</head>
<body>
<h3>Selecting text input fields using ID attribute</h3>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter username"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter Email ID"><br>
<label for="password">Password:</label>
<input type="password" class="password" id="password" name="password" placeholder="Enter your Password"><br>
</form>
</body>
</html>
Kesimpulan
Memilih medan input teks menggunakan pemilih CSS ialah proses yang mudah setelah kami memahami struktur medan input teks dan pemilih CSS berbeza yang tersedia. Dengan menggunakan pemilih CSS yang sesuai, kami boleh meletakkan dan menggayakan medan input teks dengan mudah untuk meningkatkan pengalaman pengguna borang web.
Atas ialah kandungan terperinci Bagaimana untuk memilih medan input teks menggunakan pemilih CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!