Chcę usunąć strzałkę rozwijaną z <select>
elementu HTML . Na przykład:
<select style="width:30px;-webkit-appearance: none;">
<option>2000</option>
<option>2001</option>
<option>2002</option>
...
</select>
Jak to zrobić w Operze, Firefox i Internet Explorer?
html
css
drop-down-menu
html-select
użytkownik2301515
źródło
źródło
#slectType { -webkit-appearance: none; appearance: none /*menulist*/
! ważne; max-width: 300px; line-height: 0px;} input[type='text'], select {max-height: 30px;max-width: 300px; text-align-last: center; /*text-indent: 5px;*/} button:hover {color: #FFF;background-color: #566977;box-shadow:none;border-color: #759AB5;} #errorMSG{z-index: 2147483647;}
przeglądarki [CH: -webkit, FF: -moz, IE: -ms, Oprea: -o];Odpowiedzi:
Nie ma potrzeby hacków ani przelewów. W IE jest pseudo-element dla strzałki rozwijanej:
źródło
Wcześniej wspomniane rozwiązania działają dobrze z Chrome, ale nie w Firefox.
Znalazłem rozwiązanie, które działa dobrze zarówno w Chrome, jak i Firefox (nie w IE). Dodaj następujące atrybuty do CSS dla SELECTelement i dostosuj margines do własnych potrzeb.
Mam nadzieję że to pomoże :)
źródło
Prosty sposób na usunięcie strzałki rozwijanej z wyboru
źródło
appearance: none
Chrome i Firefox Quantum (wersja 59 i nowsze). IE ma potrzeby prefiksy dostawców anymore .appearance: none
działał. Większość przeglądarek nadal potrzebuje prefiksów.Spróbuj tego :
JS Bin: http://jsbin.com/aniyu4/2/edit
Jeśli używasz Internet Explorera:
Lub możesz użyć Choosen: http://harvesthq.github.io/chosen/
źródło
Spróbuj tego:
HTML:
CSS:
źródło
Wypróbuj to, działa dla mnie
Nie możesz się ukryć, ale używając ukrytego przepełnienia możesz faktycznie sprawić, że zniknie.
źródło
Chciałem tylko uzupełnić wątek. Aby być bardzo jasnym, nie działa to w IE9, jednak możemy to zrobić małą sztuczką css.
źródło
Jak odpowiedziałem w Usuń Wybierz strzałkę w IE
Jeśli chcesz użyć klasy i pseudoklasy:
.simple-control
jest twoją klasą css:disabled
jest pseudoklasąźródło
}
źródło
Nie możesz tego zrobić dzięki w pełni funkcjonalnej obsłudze wielu przeglądarek.
Załóżmy, że weźmy div 50 pikseli i umieść wybraną ikonę rozwijaną po prawej stronie
Teraz w tym div dodaj znacznik select o szerokości może 55 pikseli (coś więcej niż szerokość pojemnika)
Myślę, że dostaniesz to, czego chcesz.
Jeśli nie chcesz, aby ikona upuszczania była widoczna po prawej stronie, po prostu wykonaj wszystkie kroki oprócz przesuwania obrazu po prawej stronie. Ustaw kontur: 0 na fokus dla wybranego znacznika. Otóż to
źródło
istnieje biblioteka o nazwie DropKick.js, która zastępuje zwykłe menu wyboru HTML / CSS, dzięki czemu można w pełni stylizować i kontrolować je za pomocą javascript. http://dropkickjs.com/
źródło
Działa dla wszystkich przeglądarek i wszystkich wersji:
JS
HTML
źródło