Formulare CSS. Intrare cu pictogramă / imagine. Proprietatea background-image. Proprietatea background-position. Intrare de căutare animată.
Partajeaza in Google Classroom
Memorator: Descriere video Descarcă PDF
Dacă doriți o pictogramă (icon) în interiorul intrării, utilizați proprietatea background-image și poziționați-o cu proprietatea background-position. Rețineți, de asemenea, că adăugăm un left padding mare pentru a rezerva spațiul pictogramei (icon):
Exemplu:
input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
Intrare de căutare animată(Animated Search Input)
În acest exemplu, utilizăm proprietatea CSS transition pentru a anima lățimea (width) intrării de căutare atunci când devine focus.
Exemplu:
input[type=text] {
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}