Jak wstawić domyślny tekst do pola wyszukiwarki? (oraz omówienie podstawowych pseudoklas w CSS)
HTML + CSS Aktualizacja: 27.07.2017

Jak wstawić domyślny tekst do pola wyszukiwarki? (oraz omówienie podstawowych pseudoklas w CSS)

CSS posiada duże możliwości, jeżeli chodzi na przykład o formatowanie tekstu. Możliwe jest także panowanie nad różnymi elementami, jak mają się zachować w określonych przez nas sytuacjach. Jedną z nich jest pole wyszukiwarki na stronie - proste, nie wyróżnia się, ale jest przydatne. Postanowiłem dodać do niego tekst "Wyszukaj artykuł...", można to zrobić poprzez dodanie parametru value.

Takie rozwiązanie posiada wadę, jeżeli faktycznie ktoś, będzie chciał skorzystać z wyszukiwarki to będzie musiał kliknąć w to pole, usunąć ten domyślny tekst, wpisać własny i wysłać zapytanie. Teraz pojawia się pytanie, po co utrudniać Użytkownikowi życie, skoro możemy tę drogę skócić.

1. Placeholder w HTML5

Tworzymy proste pole formularza, które posłuży za wyszukiwarkę. Skorzystamy poniżej z atrybutu placeholder. Jest to z języka angielskiego - wypełniacz miejsca, tekst pomocniczy, tekst zastępczy. Jako wartość tego atrybutu podaje się tekst. Wyświetli się w przypadku gdy użytkownik nie wpisał jeszcze żadnego tekstu do pola (input), natomiast jeśli zacznie wpisywać, to placeholder zniknie.

Należy pamiętać, że jest to element najnowszej wersji HTMLa - HTML5. Starsze przeglądarki mogą go nie wyświetlić (natomiast mówimy tu już o naprawdę starych przeglądarkach).

<form method="get" action="">
<input value="" type="text" placeholder="Wyszukaj artykuł">
<input type="submit" value="Szukaj">
</form>

2. Domyślny tekst znika po kliknięciu

Ten podpunkt piszę bardziej jako ciekawostkę. Tworzymy proste pole formularza, które posłuży za wyszukiwarkę.

<form method="get" action="">
<input value="" type="text">
<input type="submit" value="Szukaj">
</form>

Teraz sprawmy, żeby po kliknięciu w pole wyszukiwarki, tekst domyślny zniknął sam. Użyjemy JavaScript w tym przypadku.

<form method="get" action="">
<input value="Wyszukaj artykuł..." onfocus="if(this.value=='' || this.value == 'Wyszukaj artykuł...') this.value=''" onblur="if(this.value == '') {this.value=this.defaultValue}" onkeyup="keyUp();"  type="text">
<input type="submit" value="Szukaj">
</form>

Podsumowując. Jest już wyszukiwarka, która posiada domyślny tekst oraz posiada funkcję, że po najechaniu tekst znika.

3. Podstawowe pseudoklasy w CSS oraz zastosowanie

CSS posiada tak zwane pseudoklasy, dzięki którym możemy odnieść się do określonych sytuacji, podczas korzystania z danych elementów strony. Selektor pseudoklasy jest połączony nazwą z innym selektorem za pomocą dwukropka.

  • visited - odnośniki, które zostały odwiedzone
  • hover - elementy, nad którymi znajduje się wskaźnik myszy
  • link - odnośniki, które nie zostały jeszcze odwiedzone
  • focus - elementy, które mają fokus (formularz, który Użytkownik aktualnie wypełnia)
  • active - elementy, które są aktywne (właśnie klikany odnośnik)
  • first-child - element, który jest pierwszym dzieckiem swojego rodzica (pierwszy element listy)

Podstawowe pseudoklasy powyżej, więc pora przejść do praktyki. Teraz można dodać kilka dodatkowych parametrów za pomocą CSS. Planuję zrobić, by przed kliknięciem w pole tekst był pisany kursywą i był przygaszony, a po kliknięciu był wyraźny i bez kursywy. Jak to zrobić?

form input[type="text"]{ color: #999; font-style: italic; }
form input[type="text"]:focus{ color: #222; font-style: normal; }

Najpierw odwołujemy się do pola formularza czyli form input[type="text"]. W pierwszej kolejności nadajemy kolor tekstu szary oraz kursywę. W drugiej linijce powtarzamy to samo odwołanie z tym, że dodajemy pseudoklasę focus (gdy ktoś zacznie pisać w formularzu, to będzie to działać) oraz style - tekst wyraźny i bez kursywy.

Autor: . Tagi: , , .

2
Dodaj komentarz

avatar
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Bartosz StefanickiComandeer Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

najnowszy najstarszy oceniany
Comandeer
Gość

A propos #1 - czemu po prostu nie placeholder z HTML5? co najwyżej z fallbackiem to czegoś takiego. Zrobić test na obecność placeholdera łatwo, więc...

Bartosz Stefanicki
Gość
Bartosz Stefanicki

@Comandeer,

Dzięki za zwrócenie uwagi. W Internet Explorer 9 placeholder nie działa (teraz obsługuje tylko Safari, Chrome, Firefox). Ale ciekawe rozwiązania się szykują...