Stilizarea Input-ului cu Focus
Când un câmp de input primește focus (se dă clic pe el), unele browsere desenează implicit un contur albastru în jurul lui. Adăugarea outline: none; la câmpul de input dezactivează acest comportament.
Când vrei propriul stil pentru câmpul de input cu focus, folosește selectorul :focus.
Exemplu
Când un câmp de input de tip text primește focus, culoarea sa de fundal se schimbă.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type=text]:focus {
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Focus Background Color</h2>
<p>Click on the text field to see the focus effect:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Exemplu
Când un câmp de input de tip text primește focus, bordura sa se schimbă.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type=text]:focus {
border: 3px solid #555;
}
</style>
</head>
<body>
<h2>Focus Border</h2>
<p>Click on the text field to see the focus effect:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Stilizarea Input-ului cu pictogramă/imagine
Dacă o pictogramă trebuie să apară în interiorul câmpului de input, de asta se ocupă două proprietăți: background-image o furnizează, iar background-position o plasează. Un padding mare în stânga păstrează apoi spațiu liber pentru pictogramă.
Exemplu
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
</style>
</head>
<body>
<h2>Input Icon</h2>
<p>An input field with an icon inside:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>
Câmp de Căutare Animat
În acest exemplu, un câmp de căutare se lățește atunci când primește focus, iar schimbarea lățimii este animată de proprietatea CSS transition. Această proprietate este explicată mai detaliat mai târziu, în capitolul CSS Transitions.
Exemplu
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
input[type=text] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
padding: 12px 20px;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
</style>
</head>
<body>
<h2>Animated Search Input</h2>
<p>Click on the search field to see the animation effect:</p>
<form>
<input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>