Πώς να δημιουργήσετε: αναδυόμενο πλαίσιο αναζήτησης

Μάθετε πώς να χρησιμοποιήσετε το CSS για να δημιουργήσετε ένα αναδυόμενο πλαίσιο αναζήτησης.

Κάντε κλικ στο πεδίο εισόδου:

Πώς να δημιουργήσετε ένα αναδυόμενο πλαίσιο αναζήτησης

Πρώτη Βήμα - Προσθήκη HTML:

<input type="text" name="search" placeholder="Αναζήτηση..">

Δεύτερη Βήμα - Προσθήκη CSS:

input[type=text] {
  πλάτος: 130px;
  -webkit-μετάβαση: πλάτος 0.4s εύκολη είσοδος-έξοδος;
  μετάβαση: πλάτος 0.4s εύκολη είσοδος-έξοδος;
}
/* Όταν το πεδίο εισόδου αποκτά εστίαση, αλλάζει το πλάτος του σε 100% */
input[type=text]:focus {
  πλάτος: 100%;
}

Try it yourself

Related pages

Tutorial:HTML form

Tutorial:CSS form