Zmiana wyglądu formularzy

Damian Kołodziejski

Zmiana wyglądu formularzy
22 listopada, 2017 Katarzyna Sobczak

Zmiana wyglądu formularzy

Zmiana wyglądu checkbox, radio, select jest możliwa tylko za pomocą CSS. W artykule pokazuję jak to zrobić.

Jeśli zajmujesz się częścią frontendową w budowaniu aplikacji internetowych to na pewno wiesz jak uciążliwa jest zmiana domyślnych pól wyboru. Domyślny wygląd inaczej się prezentuje w innych przeglądarkach. Istnieje kilka metod radzenia sobie z tym problemem: obrazek tła, specjalne czcionki czy przedrostki dostawców. Problemem tego typu rozwiązań jest to, że mimo wszystko nie są spójne we wszystkich przeglądarkach. Inną kwestią jest to, że rozwiązania te zazwyczaj wymagają podpięcia kilku elementów do strony (np. biblioteka stylów + font lub biblioteka stylów + obraz).

Istnieje jednak rozwiązanie wymagające tylko biblioteki stylów. Można de facto zrobić z niej gotowy komponent i używać wielokrotnie w różnych projektach. Aby stworzyć takie rozwiązanie potrzebna jest znajomość pseudoelementów (::before::after), sleketorów po atrybutach ([type="checkbox"][type="radio"]) i znaczniki selektorów po atrybutach (:checked:disabled:focus)oraz znacznik sąsiedztwa (+).

Dzięki zastosowaniu tych trzech cech CSS formularze powinny wyglądać tak samo w każdej przeglądarce starszej niż IE9.
Każdemu elementowi trzeba narzucić strukturę obudowania elementu.
Dla kolejno checkbox, radio i select należy to zxrobić w następujący sposób:


<label class="apn-checkbox"><span>checkbox</span><input type="checkbox" name="a"><i></i></label>

<label class="apn-radio"><span>radio</span><input type="radio" name="b"><i></i></label>

 <label class="apn-select"><select class="apn-select-option"><option selected disabled>Pick one</option><option disabled>Trabant</option><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="opel">Opel</option><option value="audi">Audi Audi</option></select></label>

 Atrybuty takie jak fortypename i class są wymagane. Pozwalają one na namierzanie elementów, którym zmieniamy styl.
Dla opcji checkbox oraz opcji radio zmiana wyglądu będzie polegać na ukryciu defaultowego elementu (input) i stworzenie z elementu <i></i> nowego elementu. Klasy zaczynające się od apn będą służyć jako elementy kluczowe w nawigacji stylami. Z elementów i::before będzie zbudowana nowa ramka (kwadrat dla chceckbox, okrąg dla radio). Z elementów i::after będzie zbudowany element pojawiający się w ramce lub z niej znikający.

Także zaczynamy. Krok pierwszy to ukrycie inputa


.apn-radio input,.apn-checkbox input {opacity: 0;display: none;}

Drugim krokiem jest zbudowanie ramki z dostępnego elementu dla różnych wariantów.


.apn-checkbox > i::before {content: '';position: absolute;display: block;width: 13px;height: 13px;border: 1px solid #cfdadd;}.apn-radio > i::before {content: '';position: absolute;display: block;width:  14px;height:  14px;border-radius: 100%;border: 1px solid #cfdadd;}

Następnym krokiem jest dodanie wnętrza checkboxa oraz radio. Użyty do tego zostanie element ::after. Od razu można zaimplementować pojawianie się i znikanie danego elementu w zależności od właściwości odpowiedniego elementu <input />.


.apn-checkbox > input + i::after {content: '';position: absolute;display: block;width:  3px;height:  6px;border: solid #23b7e5;border-width: 0 2px 2px 0;transform: rotate(45deg);opacity: 0;margin-top: 2px;margin-left: 5px;}.apn-checkbox > input:checked + i::after {opacity: 1;}.apn-radio > input + i::after {content: '';position: absolute;display: block;width: 8px;height: 8px;transform: rotate(45deg);background-color: #23b7e5;border-radius: 100%;opacity: 0;margin-top:  3px;margin-left:  3px;}.apn-radio > input:checked + i::after {opacity: 1;}

Aby poprawić wyświetlanie elementów oraz wyszarzenie wyłączonych obiektów należy dodać następujące linijki:


.apn-radio, .apn-radio * {    display: flex;}.apn-checkbox, .apn-checkbox * {display: flex;}.apn-radio > span,.apn-checkbox > span{padding-left: 4px;padding-right: 4px;}.apn-checkbox > input:disabled:checked + i::after {border-color: rgba(0, 0, 0, 0.40) !important;}.apn-radio > input:disabled:checked+i::after {background-color: rgba(0, 0, 0, 0.4) !important;}.apn-checkbox:hover > input:disabled + i::before,.apn-radio:hover > input:disabled + i::before {border: 1px solid #cfdadd;}.apn-checkbox > input:disabled + i,.apn-radio > input:disabled + i {cursor: no-drop;}

Z ujednoliceniem wyświetlania elementu select będzie troszkę mniej skomplikowana logika.

Najpierw zmieńmy select mający odpowiednią klasę.


.apn-select-option {padding: 3px;margin: 0;background: #fff;border: 1px solid #C2C2C2;color: #888;border: 1px solid #cfdadd;outline: none;display: inline-block;-webkit-appearance: none;-moz-appearance: none;appearance: none;cursor: pointer;}

Z elementu ::after zrobimy ikonę z prawej strony, informującą o tym, że może wybrać inną opcję.


.apn-select::after {content: '<>';font: 11px "Consolas", monospace;color: #aaa;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);right: 8px;top: 2px;padding: 0 0 2px;border-bottom: 1px solid #ddd;position: absolute;pointer-events: none;}

Element ::before posłuży za białe tło dla elementu ::after


.apn-select::before {content: '';right: 6px;top: 0px;width:20px;height:20px;background:#fff;position:absolute;pointer-events:none;display:block;}

Niezbędny jest jeszcze jeden dodatkowy styl działający na przeglądarkach opartych na webkit


@media screen and (-webkit-min-device-pixel-ratio:0) {.apn-select-option {padding-right:18px}}

Surowy efekt tego poradnika można zobaczyć poniżej:




		

Efekt można ulepszyć stosunkowo niskim kosztem, dodając właściwości takie jak transition lub modyfikując lekko :hover elementów.

Mam nadzieję że ten poradnik pomógł Ci zrozumieć jak w poprawny sposób zmienić wygląd najtrudniejszych w modyfikacji elementów formularza.

Podziel się

Autor: Damian Kołodziejski

Damian Kołodziejski

Damian Kołodziejski

Ostatnie artykuły autora

Analiza i porównanie frameworków JavaScript, cz. 2

Analiza i porównanie frameworków JavaScript, cz. 2

Porównanie ze względu na budowę małych oraz dużych aplikacji internetowych. Druga część serii.

Zmiana wyglądu formularzy

Zmiana wyglądu formularzy

Zmiana wyglądu checkbox, radio, select jest możliwa tylko za pomocą CSS. W artykule pokazuję jak to zrobić.

Tooltip w prostym i efektownym wykonaniu

Tooltip w prostym i efektownym wykonaniu

W tym artykule pokazano, jak wykorzystać niestandardowe atrybuty w elementach HTML, by wyświetlić ładny tooltip. Można utworzyć z niego moduł CSS, który będzie można zaimportować do każdego projektu.

Zarejestruj się i przetestuj APN Meeting Room

Wypróbuj system rezerwacji sal w praktyce, na Twojej infrastrukturze.
Wersja demonstracyjna umożliwia Ci instalację oprogramowania na 3 urządzeniach.

Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. drogą elektroniczną
Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. telefonicznie

Administratorem danych osobowych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. z siedzibą w Warszawie. Kontakt z osobą odpowiedzialną za ochronę danych osobowych jest możliwy za pośrednictwem adresu e-mail: iodo@promise.pl. Podane dane będą przetwarzane w zakresie niezbędnym do realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO, w zakresie niezbędnym dla prawidłowej realizacji żądania oraz oferowania i świadczenia usług, marketingu produktów i usług własnych oraz przeprowadzenia ankiet i oceny satysfakcji zgodnie z art. 6 ust. 1 lit. f RODO przez okres niezbędny dla realizacji celów oraz w przypadku wyrażenia zgody na podstawie art. 6 ust. 1 lit. a RODO w celu dostarczenia treści marketingowych środkami komunikacji elektronicznej lub za pomocą urządzeń telefonicznych.

Przysługuje Ci prawo do żądania dostępu do danych osobowych, ich sprostowania, usunięcia lub ograniczenia przetwarzania, jak również prawo sprzeciwu wobec przetwarzania, prawo do przenoszenia danych, a także prawo złożenia skargi do organu nadzorczego, którym w Polsce jest Prezes Urzędu Ochrony Danych Osobowych. Podanie danych jest dobrowolne, jednak niezbędne dla realizacji powyżej wskazanych celów. Odbiorcami danych mogą być podmioty lub osoby obsługujące administratora w zakresie w zakresie hostingu, komunikatorów internetowych, usług IT, księgowości, archiwizacji. Więcej informacji w Polityce Prywatności oraz Regulaminie.

Register and test the APN Meeting Room booking system.

Registering and installing the trial version you are allowed to install the software on 3 devices.

I want to receive marketing content from A.P.N. Promise S.A. electronically
I want to receive marketing content from A.P.N. Promise S.A. by phone

The data controller of personal data collected using the form is A.P.N. Promise S.A. with its registered office in Warsaw. Contact with the person responsible for the personal data protection is possible via following e-mail address: iodo@promise.pl. The given data shall be processed to the extent necessary to carry out specified request in accordance with art. 6(1)(b) of GDPR and to the extent necessary for the correct realization of the request and offer and provision of services, own product and services marketing and conducting surveys and satisfaction ratings in accordance with art. 6(1)(f) of GDPR for the period necessary to achieve the purposes and in the event of consent in accordance with art. 6(1)(a) of the GDPR to provide marketing content by electronic means or by telephone devices.

You have the right to request access to your personal data, rectification, deletion or limitation of processing, as well as the right to object to processing, the right to transfer data and the right to lodge a complaint with a supervisory authority, i.e. the President of the Personal Data Protection Office in Poland. Providing data is voluntary but necessary for the realization of the above-mentioned purposes. Recipients of data may be entities or persons servicing the data controller in the field of hosting, instant messengers, IT services, accounting, archiving. More information in the Privacy Policy and Regulations.

Cybersecurity w obszarze zarządzania zasobami oprogramowania

Napisz do nas, a skontaktujemy się z Tobą i bezpłatnie porozmawiamy o Twoim poziomie cyberbezpieczeństwa w obszarze SAM.

 

Administratorem danych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. Podane przez Ciebie dane będą przetwarzane w zakresie niezbędnym do podjęcia kontaktu lub realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO przez okres niezbędny dla realizacji Twojego zgłoszenia. Wszelkie informacje w zakresie przetwarzania podanych przez Ciebie w formularzu danych oraz posiadanych uprawnieniach znajdziesz w Polityce prywatności. Kliknij i dowiedz się więcej jeżeli informacje podane powyżej nie są dostatecznie jasne!

Zostaw adres mailowy i nie przegap kolejnego szkolenia!

[contact-form-7 404 "Not Found"]