Strona korzysta z plików cookies w celu realizacji usługi. Więcej informacji w naszej Polityce plików cookies

Zmiana wyglądu formularzy

Strona główna / BlogIT / Listopad 2017 / Zmiana wyglądu formularzy

Zmiana wyglądu checkbox, radio, select jest możliwa tylko za pomocą CSS.

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 for, type, name 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.

Komentarze
Wpis nie posiada komentarzy.