Jak utworzyć pasek wyszukiwania w HTML

Różne komponenty tworzą strony internetowe aplikacji, takie jak ładowarka, paski nawigacyjne, paski wyszukiwania i inne. Właściwości CSS są wykorzystywane do stylizacji tych komponentów. Mówiąc dokładniej, komponent, który jest prawie obowiązkowy dla każdej aplikacji, jest „Pasek wyszukiwania". Paski wyszukiwania służą do lepszej dostępności użytkownikom w sposób, w jaki użytkownicy wyszukują komponenty zamiast przeglądać całą stronę internetową.

Ten post będzie prowadził:

• Co to jest pasek wyszukiwania?
• Jak utworzyć pasek wyszukiwania w HTML?
• Jak dodać właściwość przejściową do przycisku paska wyszukiwania?

Co to jest pasek wyszukiwania?

Pasek wyszukiwania jest graficznym elementem sterowania dowolnej aplikacji. Składa się głównie z jedno-linii pola tekstowego i przycisku. Działa w taki sposób, że użytkownik wpisuje informacje w polu wejściowym do wyszukiwania, a następnie naciska przycisk, aby uzyskać wyniki.

Jak utworzyć pasek wyszukiwania w HTML?

Po pierwsze, dodaj element DIV z klasą „Wyszukiwanie-main". Dodaj kolejny tag div z nazwą klasy „Poszukiwanie paska„Wewnątrz tego div. Następnie umieść w nim znacznik wejściowy i znacznik przycisku. Znacznik wejściowy jest powiązany z atrybutami „typ”Z wartością jako„tekst”I„symbol zastępczy”Służy do pokazania tekstu w polu wejściowym.

Oto kod HTML:

Szukaj

CSS

W CSS wykorzystywane są różne właściwości do stylizowania paska wyszukiwania. Omów je jeden po drugim!

Styl wszystkie rodzaje elementów

*
Margines: 0;
Wyściółka: 0;
Rozmiar pola: granica;
Font-Family: Verdana, Genewa, Tahoma, Sans-Serif;

Symbol gwiazdki „*” służy do reprezentowania wszystkich rodzajów elementów, a jeśli następuje dowolny element, klasa lub identyfikatory, będzie reprezentował całą tę określoną nazwę w całym dokumencie.

• "margines”Własność o wartości 0 nie zapewni miejsca wokół żadnego elementu.
• "wyściółka”Z wartością 0 określa, że ​​nie przypisuje się miejsca wokół zawartości.
• "rozmiar pudełka”Z wartością graniczną obejmuje wyściółkę i granicę do całkowitej wysokości i szerokości elementu.
• "rodzina czcionek”Jest wykorzystywany do wyboru czcionki wszystkich elementów.

Element „Body” stylu

ciało
kolor tła: Darkslaterey;

Kolor tła sekcji całego ciała jest ustawiony na „Darkslaterey" kolor.

Styl „wyszukiwanie” div

.wyszukiwanie
kolor tła: RGBA (0, 0, 0, 0.159);
maksymalna szerokość: 700px;
Margines: 150px Auto;
Wysokość: 400px;
Radiusz graniczny: 30px;

Element z wyszukiwaniem atrybutów klasowych ma różne właściwości opisane poniżej:

• "maksymalna szerokość”Określa maksymalny limit szerokości.
• "wysokość”Określa całkowitą wysokość Div na 400px.
• "Radiusz graniczny”Zapewnia promień 30px wokół elementu DIV.
• „„kolor tła" I "margines„Właściwości działają jak omówiono powyżej.

Styl „Search-Bar” div

.Poszukiwanie-bar
Wyświetlacz: Flex;
Justify-Content: Center;
Wyrównanie: Center;
Wysokość: 100%;

Div Search-Bar jest stylizowany z właściwościami CSS, które omówiono poniżej:

• "wyświetlacz„Property Flex jest wykorzystywane do wykonania responsywnego elastycznego układu Div.
• "justify-content”Wyrównuje elastyczne elementy Div poziomo.
• "Wyrównanie”Ustawia wyrównanie elastycznych elementów pionowo.
• "wysokość„Własność występuje jak wyjaśniono powyżej.

Element stylu „wejściowy”

.Wejście do wyszukiwania
granica: 1px stały RGB (47, 63, 63);
Wyściółka: 20px 30px;
Rozmiar czcionki: 24px;
kolor tła: RGB (85, 104, 104);
Kolor: #ffffff;
Zarys: Brak;

Pole wejściowe Div paska wyszukiwania podano właściwości, które zostały wyjaśnione poniżej:

• "granica„Właściwość ustawia granicę wokół pola wejściowego z szerokością, stylem liniowym i kolorem.
• "rozmiar czcionki„Właściwość określa rozmiar czcionki tekstu.
• "kolor”Definiuje kolor tekstu pola wejściowego.
• "zarys„Właściwość o wartości 0 nie ustawi linii wokół granicy elementu, głównie po kliknięciu.
• „„wyściółka" I "kolor tła”Właściwości działają jak podano powyżej.

Styl zastępczy

.Wyszukiwarka wpisu :: zastępca
Kolor: #dadada;

Atrybut zastępcy pola wejściowego Div paska wyszukiwania jest przypisany do „kolor„Nieruchomość #dadada. Zastosuje kolor do tekstu zastępczego.

Przycisk stylu

.przycisk wyszukiwania baru
granica: 1px stały RGB (47, 63, 63);
Wyściółka: 20px 30px;
Rozmiar czcionki: 22px;
kolor tła: RGB (12, 33, 33);
Kolor: #A3A3A3;
Kursor: wskaźnik;
Margin-left: 10px;

Właściwości elementu przycisku Div Search-Bar zostały wyjaśnione poniżej:

• "kursor„Właściwość określa styl kursora myszy podczas wskazywania przycisku.
• "margines lewic”Dodamy trochę miejsca w lewo od przycisku.
• Wszystkie pozostałe właściwości działają tak samo.

Wykonując wyżej wymieniony kod, otrzymamy wynik, jak pokazano na poniższym obrazku:

Jak wiemy, właściwości przejściowe i animacyjne na przedmiotach sprawiają, że są bardziej interaktywne i zabawne. Tak więc następna sekcja opisuje dodanie przejścia do przycisku wyszukiwania.

Jak dodać właściwość przejściową do przycisku paska wyszukiwania?

Dodaj właściwość przejścia z zestawem wartości jako „Wszystkie 0.3s łatwość" do ".Przycisk Poszukiwania paska”, Gdzie wszystkie wskazują wszystkie właściwości, 0.3s wskazuje na czas przejścia, a łatwość oznacza powolny start, a potem szybki i kończy się powoli:

przejście: wszystkie 0.3s łatwość;

Teraz, aby przejść na przycisk na zawisie, element przycisku jest stylizowany jak wspomniany w poniższym bloku kodu.

Przycisk stylu na zawisie

.Przycisk wyszukiwania: Hover
Transform: Translatey (-5px);

Element przycisku jest stylizowany przy użyciu transformacji właściwości z wartością „tłumaczenie (-5px)”Co oznacza na podnoszeniu myszy, przycisk porusza się w pozycji pionowej.

Dodany efekt można zobaczyć na poniższym obrazku:

To wspaniale! Interaktywne pasek wyszukiwania jest z powodzeniem utworzone w HTML za pomocą CSS.

Wniosek

W HTML pasek wyszukiwania składa się głównie z pola wejściowego i przycisku, użycia i elementów. Komponenty internetowe mogą być stylizowane jako interaktywne, zapewniając właściwości animacji i przejścia, jak wspomniano. Ten blog wyjaśnił, jak utworzyć pasek wyszukiwania w HTML z dokładnym przykładem.