Formulare CSS. Intrare cu pictogramă / imagine. Proprietatea background-image. Proprietatea background-position. Intrare de căutare animată.

Intrare cu pictogramă / imagine (Input with icon/image)

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%;
}