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.
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.
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.
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>
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 */
}
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>
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".
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>
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!
Apakah platform Fengxiangjia?
Bagaimana untuk memulihkan fail yang dipadam pada komputer
Bagaimana untuk melaraskan sensitiviti tetikus
Apakah tatasusunan kosong dalam php
Peranan mendaftar pelayan awan
Bagaimana untuk menyelesaikan masalah bahawa pemproses cetak tidak wujud
Apakah kaedah penghasilan penghasilan animasi html5?
Bagaimana untuk menukar perisian bahasa c ke bahasa Cina
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
