Jak zmienić strzałkę dla select na ładniejszą

Na niektórych stronach można zobaczyć ładnie sformatowane formularze, gdzie strzałka przy <select> jest inna niż standardowa.  Elementu formularza <select> nie da się sformatować przy pomocy css, ale jest pare sposobów rozwiązania tego problemu.  Można znaleźć w sieci odpowiedni skrypt jquery, który spełni to zadanie. Jednak tego typu skryptów jest bardzo mało, trudno je znaleźć. Ponadto są stare i nie rozwijane przez ich autorów.

Aby usunąć standardową strzałkę dla <select> trzeba otoczyć element przez dodatkowy div i dodać do niego css. Jest to jeden ze sposobów. Działa poprawnie także w IE. Dzięki niemu standardową strzałkę można zastąpić grafiką, która wygląda ładniej.

.listing select{
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url("../images/select-bg.jpg") no-repeat scroll 90% 50% transparent;
    text-indent: 0.01px;
    text-overflow: "";

}
.listing select::-ms-expand{
    display: none;
}


Używamy tu właściwości appearance, która niestety nie jest wspierana przez wszystkie przeglądarki.

Appearance służy do nadawania lub usuwania domyślnych stylów dla danego elementu. Na przykład można usunąć domyślną strzałkę z select. Na przykład można jakiemuś elementowi, który normalnie nie jest butonem, nadać wygląd butonu:

div
{
appearance:button;
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari and Chrome */
}

5 Comments
  1. Dla mnie to niepotrzebny element, który może jedynie popsuć klasyczny wygląd strony. Ale wiadomo – dla każdego coś innego. W każdym razie wytłumaczone naprawdę dobrze i sensownie, kto wie kiedy się może przydać 😉

  2. Jak dla mnie też zbędny bajer, ale wytłumaczone całkiem spoko.

  3. Pani Małgorzato! Informuję że wchodzę sobie na tą konkretną podstronę, używając przeglądarki Opera i uderza mnie po oczach okno z komunikatem

    “Not Found

    The requested URL /index2.htm was not found on this server.”

    Proszę poprawić, błąd na stronie nie pasuje do strony o ulepszaniu stron 😉

  4. No może i niepotrzebne, ale czasami fajnie jest sobie coś urozmaicić 🙂

Leave a reply

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

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