Zmiana koloru i wyglądu strzałki rozwijanej

Question

Chcę zmienić domyślny wygląd strzałki listy rozwijanej, aby wyglądał tak samo w różnych przeglądarkach. Czy istnieje sposób na zastąpienie domyślnego wyglądu i stylu strzałki rozwijanej przy użyciu CSS lub w inny sposób?

Answer 1

Nie, custymizacja w różnych przeglądarkach jest bardzo trudna, jeśli nie jest niemożliwa dla wszystkich przeglądarek. Jeśli naprawdę zależy Ci na pojawieniu się tych widżetów, powinieneś użyć implementacji javascript.

zobaczyć http://www.456bereastreet.com/archive/200409/styling_form_controls/ i http://developer.yahoo.com/yui/examples/button/btn_example07.html

Answer 2

Element <select> jest generowany przez aplikację i stylizacji nie jest częścią specyfikacji CSS/HTML.

Będziesz musiał sfałszować swój własny DIV i nałożyć go na istniejący, lub zbudować własną kontrolę emulującą tę samą funkcjonalność.

Answer 3

Nie, nie można tego zrobić przy użyciu rzeczywistego <select>, ale istnieją techniki, które pozwalają "zastąpić" je rozwiązaniami javascript, które wyglądają lepiej.

Oto dobry artykuł na ten temat: <select> Something New

Answer 4

chyba że planujesz utworzenie własnego rozwijanej listy (a nie przy użyciu biblioteki standardowej listy rozwijanej), utkniesz. Wygląd kontrolki DDL będzie oparty na systemie, z którego korzystasz i/lub przeglądarce, która renderuje dane wyjściowe.

Answer 5

Nie łatwo zrobić, obawiam się. Problem polega na tym, że Css nie może zastąpić strzałki w selekcji, ponieważ jest ona renderowana przez przeglądarkę. Ale możesz zbudować nową kontrolę z elementów div i input oraz Javascript, aby wykonać tę samą funkcję, co select.

Spróbuj na przykład wypróbować niektóre z wtyczek autouzupełniania dla Jquery.

przeciwnym razie istnieje kilka informacji na zaznaczonym elemencie tutaj:

http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/

Answer 6

Można współpracy to z CSS, ale nie są techinically zmiany samego strzałkę.

W tym przykładzie ukrywam domyślną strzałkę i wyświetlam własną strzałkę.

HTML:

<div class="styleSelect"> 
    <select class="units"> 
    <option value="Metres">Metres</option> 
    <option value="Feet">Feet</option> 
    <option value="Fathoms">Fathoms</option> 
    </select> 
</div> 

CSS:

.styleSelect select { 
    background: transparent; 
    width: 168px; 
    padding: 5px; 
    font-size: 16px; 
    line-height: 1; 
    border: 0; 
    border-radius: 0; 
    height: 34px; 
    -webkit-appearance: none; 
    color: #000; 
} 

.styleSelect { 
    width: 140px; 
    height: 34px; 
    overflow: hidden; 
    background: url("images/downArrow.png") no-repeat right #fff; 
    border: 2px solid #000; 
} 

Answer 7

Użyliśmy YUI, wybranym, a obecnie za pomocą wtyczki jQuery Select2: https://select2.github.io/

to całkiem solidne, strzałka tylko wierzchołek góry lodowej.

Gdy tylko stylizowane zaznaczenia stają się wymaganiem, zgadzam się z innymi, dołączam wtyczkę. Nie zabijaj się przy wymyślaniu koła.

Answer 8

Można to zrobić poprzez:

select{ 
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; 
} 

select{ 
 
    background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) no-repeat 100% 50%; 
 
    
 
    
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    -webkit-border-radius: 0px; 
 
    appearance: none; 
 
    outline-width: 0; 
 
    
 
    padding: 10px 10px 10px 5px; 
 
    display: block; 
 
    width: 10em; 
 
    border: none; 
 
    font-size: 1rem; 
 
    
 
    border-bottom: 1px solid #757575; 
 
    }

<div class="styleSelect"> 
 
    <select class="units"> 
 
    <option value="Metres">Metres</option> 
 
    <option value="Feet">Feet</option> 
 
    <option value="Fathoms">Fathoms</option> 
 
    </select> 
 
</div>

Answer 9

Spróbuj zmienić kolor swojego "border-top" atrybutu do białego