Stilizarea Câmpurilor de Input din Formulare
Majoritatea tipurilor de input acceptă stilizare CSS, printre ele câmpurile text, câmpurile de parolă, casetele de bifare, butoanele radio și input-urile pentru fișiere. Pot fi stilizate și etichetele input-urilor și butoanele formularului.
Proprietățile pe care le vei folosi cel mai des pentru câmpurile de input includ width, padding, margin, border, border-radius, background-color, color și font-size.
Stilizarea Lățimii Input-ului
Ca să decizi cât de lat este un câmp de input, setează-i proprietatea width.
Sfat: Dacă nu o modifici, un câmp de input text HTML are o lățime de 20 de caractere.
Exemplu
În acest exemplu, câmpul de input este setat la o lățime de 100%:
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Width</title>
<style>
input {
width: 100%;
}
</style>
</head>
<body>
<h2>Full-width Input Field</h2>
<p>A full-width input field:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Selectori de atribute
Acea regulă se aplică fiecărui element <input>. Ca să vizezi un singur tip de input, treci în schimb la selectori de atribute:
input[type=text] - will only select text fields
input[type=password] - will only select password fields
input[type=number] - will only select number fields
etc..
Stilizarea Padding-ului Input-ului
Dacă un câmp text are nevoie de puțin spațiu în interior, padding este proprietatea care îl adaugă.
Sfat: Când câmpurile de input vin unul după altul, puțin margin le poate oferi și spațiu suplimentar la exterior.
Exemplu
Notă: Cu box-sizing setat la border-box, padding-ul și orice borduri sunt incluse în lățimea și înălțimea totală ale elementelor. Capitolul CSS Box Sizing explică această proprietate mai detaliat.
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Padding</title>
<style>
input[type=text] {
width: 100%;
padding: 12px;
margin: 10px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>Padded Input Fields</h2>
<p>Padded input fields with margin:</p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Stilizarea Bordurii Input-ului
Două proprietăți modelează conturul unui câmp: border îi schimbă mărimea și culoarea, iar border-radius rotunjește colțurile.
Bordură rotunjită
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Border</title>
<style>
input[type=text] {
border: 2px solid red;
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Input Border</h2>
<p>A text input with a red border and rounded corners:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Doar bordură de jos
Pentru o bordură care apare doar pe marginea de jos, folosește border-bottom:
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Bottom Border</title>
<style>
input[type=text] {
border: none;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<h2>Input Bottom Border Only</h2>
<p>A text input with only a bottom border:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Stilizarea Culorii de Fundal și a Culorii Input-ului
Un input își ia culoarea textului din proprietatea color, în timp ce background-color adaugă o culoare în spatele lui.
Exemplu
Output: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Background Color</title>
<style>
input[type=text] {
background-color: #3CBC8D;
color: white;
}
</style>
</head>
<body>
<h2>Input Colors</h2>
<p>A text input with a green background and white text color:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>