Efektowna wyszukiwarka w CSS3

Strony internetowe tworzone są np. w celu popularyzacji danego tematu. Twórcy witryn poświęcają wiele czasu, by ich dzieła przykuwały wzrok odwiedzających. Jednym z najważniejszych elementów strony internetowej jest wyszukiwarka treści. Dzisiaj postaram się w prosty sposób przedstawić, jak zrobić efektowną wyszukiwarkę w CSS. Co będziemy potrzebować:

  • formularz z jednym (lub więcej) polem typu tekstowego,
  • arkusz stylów CSS,
  • oraz trochę chęci do zabawy.

Zaczynamy. Tworzymy prosty formularz HTML:

<form>
<label for="pole">Wpisz tekst</label>
<input type="text" id="pole" placeholder="" />
</form>

Powyższy kod wyświetli nam na ekranie formularz składający się z etykietki pola tekstowego oraz samego pola tekstowego, w którym będzie wpisywany tekst. Kolejnym krokiem jest ostylowanie powyższego formularza i tu zaczyna się cała zabawa. Najpierw przedstawię kod CSS, a następnie go omówię.

form {
   margin: 0 auto;
   width: 100%;
   display: block;
}
label, input {
   float: left;
   color: #737373;
   vertical-align: baseline;
}
label {
   margin: 2px 2px 0 0;
}
input[type=text] {
   font: 1em Arial, Sans-serif;
   border: 2px solid #737373;
   border-width: 0 0 3px;
   background-color: transparent;
   padding: .1875em .375em;
   width: 80%;
}
input[type=text]:focus {
   outline: 0;
   border-color: #E18728;
   color: #E18728;
}

Pierwsza klasa form, jak łatwo się domyślić odnosić będzie się do całego formularza. Nadany zostanie margines, aby wyśrodkować formularz, wyświetlać go jako cały blok na 100% szerokości.

Druga klasa, czyli label, input odnosić będzie się do etykietki i pola. Definiujemy kolejno: wyrównanie do lewej, ustawiamy kolor typu hex i wyrównujemy w pionie. Dodatkowo poniżej klasa label otrzyma górny i prawy margines 2 piksele.

Dochodzimy do sedna. Selektor input[type=text] oznaczy i ostyluje nam pole typu tekstowego formularza w następujący sposób: nadany zostanie typ, krój oraz wielkość wpisywanego tekstu. Następnie grubość, typ i kolor ramki, później przezroczyste tło, wewnętrzny odstęp o określonych wartościach i 80% szerokość.

Ostylowane zostanie również zdarzenie kliknięcia w pole formularza za pomocą definicji :focus. Obramowanie outline zostanie wyzerowane, kolor ramki wokół pola tekstowego zostanie zmieniony oraz kolor wpisywanego tekstu. I gotowe. Całość przedstawia się w następujący sposób.

Efektowna wyszukiwarka w CSS3

Powiadomienie cookies

Strona lukaszbacik.pl zapisuje pliki cookies na komputerach odwiedzających ją internautów. Czytaj więcej.