4.1 Psevdoklass :checked
CSS-də formalar üçün psevdoklasslar formanın elementlərini vəziyyətlərindən asılı olaraq stilizə etmək imkanı verir. Bu psevdoklasslar interaktiv və əlçatan formalar yaratmağa imkan verir, istifadəçi interfeysi və təcrübəni yaxşılaşdırır. Gəlin detalı şəkildə psevdoklasslar :checked, :disabled, :enabled, və :invalid haqqında baxaq.
Psevdoklass :checked, "seçilib" vəziyyətində olan forma elementlərinə tətbiq edilir. Bu, checkboxlara (<input type="checkbox">), radio düymələrinə (<input type="radio">) və variantlara (<option>) aiddir.
Sintaksis:
selektor:checked {
xassələr: dəyərlər;
}
İstifadə nümunəsi
Bu nümunədə seçilmiş checkboxlar, radio düymələri və variantlar "seçilib" vəziyyətində olduqda müvafiq fon rəngini əldə edir:
/* Seçilmiş checkboxun stilizasiyası */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Seçilmiş radio düyməsinin stilizasiyası */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Seçilmiş variantın stilizasiyası */
option:checked {
background-color: #e74c3c;
}
4.2 :disabled Psevdo-sinifi
:disabled psevdo-sinifi, deaktiv vəziyyətdə olan forma elementlərinə tətbiq olunur. Bu, müvəqqəti olaraq qarşılıqlı əlaqə üçün əlçatan olmayan elementləri stilləşdirmək üçün faydalıdır.
Sintaksis:
selektor:disabled {
xassələr: dəyərlər;
}
İstifadə nümunəsi
Bu nümunədə deaktiv edilmiş input sahələri və düymələr uyğun fon rəngi, sərhəd və mətn rəngi alır, eləcə də "qadağan" olan kursoru dəyişdirir:
/* Deaktiv edilmiş input sahəsinin stilləşdirilməsi */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Deaktiv edilmiş düymənin stilləşdirilməsi */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
4.3 Psevdosinif :enabled
Psevdosinif :enabled daxilində olan formaların işlək halda istifadəsi zamanı istifadə estetik dəyiştir.
4.4 Pseudoclass :invalid
:invalid pseudoclass form elementlərinə şamil edilir, hansı ki, validasiyadan keçməyib. Bu, düzgün olmayan məlumatları ehtiva edən input sahələrini stilizə etməyə imkan verir.
Sintaksis:
selector:invalid {
xassələr: dəyərlər;
}
İstifadə nümunəsi
Bu nümunədə düzgün olmayan input sahələri və mətn sahələri vizual olaraq məlumatların validasiyadan keçmədiyini göstərmək üçün uyğun border və fon rəngi alır:
/* Düzgün olmayan input sahəsinin stilizasiyası */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Düzgün olmayan mətn sahəsinin stilizasiyası */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
4.5 Tam tətbiq nümunəsi
/* Seçilmiş checkbox stilizasiyası */
input[type="checkbox"]:checked {
background-color: #3498db;
}
/* Seçilmiş radio düyməsinin stilizasiyası */
input[type="radio"]:checked {
background-color: #2ecc71;
}
/* Aktiv olmayan input sahəsinin stilizasiyası */
input:disabled {
background-color: #f0f0f0;
border-color: #ccc;
color: #888;
}
/* Aktiv olmayan düymənin stilizasiyası */
button:disabled {
background-color: #d0d0d0;
color: #777;
cursor: not-allowed;
}
/* Aktiv olan input sahəsinin stilizasiyası */
input:enabled {
background-color: #fff;
border-color: #3498db;
}
/* Aktiv olan düymənin stilizasiyası */
button:enabled {
background-color: #2ecc71;
color: white;
cursor: pointer;
}
/* Düzgün olmayan input sahəsinin stilizasiyası */
input:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
/* Düzgün olmayan tekst sahəsinin stilizasiyası */
textarea:invalid {
border-color: #e74c3c;
background-color: #f9e0e0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formaların pseudo-class nümunəsi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form>
<label>
<input type="checkbox" name="option1"> Seçim 1
</label>
<br>
<label>
<input type="radio" name="choice" value="1"> Seçim 1
</label>
<label>
<input type="radio" name="choice" value="2"> Seçim 2
</label>
<br>
<input type="text" placeholder="Adınızı daxil edin" required>
<br>
<input type="email" placeholder="Email adresinizi daxil edin" required>
<br>
<button type="submit">Təsdiq et</button>
<button type="button" disabled>Aktiv olmayan düymə</button>
</form>
</body>
</html>
GO TO FULL VERSION