Jak stylować rozwijane menu tylko za pomocą CSS?
Czy istnieje tylko CSS sposób na styl <select> rozwijane?
Muszę stylizować formę <select> tak bardzo, jak to tylko możliwe, bez żadnego JavaScript. Jakie właściwości mogę wykorzystać w CSS?
Ten kod musi być kompatybilny ze wszystkimi głównymi przeglądarkami:
- Internet Explorer 6,7 i 8
- Firefox
- Safari
Wiem, że mogę to zrobić z JavaScript: przykład.
I nie mówię o prostej stylizacji. Chcę wiesz, co najlepsze możemy zrobić tylko z CSS.Znalazłem podobne pytania na Stack Overflow.
I Ten na Doctype.com.
24 answers
Oto 3 rozwiązania:
Rozwiązanie # 1-wygląd: brak - z obejściem ie10-11 ( Demo )Aby ukryć domyślny zestaw strzałek appearance: none na elemencie select, dodaj własną strzałkę za pomocą background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* remove default arrow */
background-image: url(...); /* add custom arrow */
}
Obsługa Przeglądarki:
appearance: none ma bardzo dobrą obsługę przeglądarki (caniuse ) - z wyjątkiem ie11 - i firefox 34 -
Możemy poprawić tę technikę i dodać wsparcie dla ie10 i ie11 przez dodawanie
select::-ms-expand {
display: none; /* hide the default arrow in ie10 and ie11 */
}
Jeśli ie9 jest problemem - nie mamy możliwości usunięcia domyślnej strzałki (co oznaczałoby, że mamy teraz dwie strzałki), ale moglibyśmy użyć funky selektor ie9 aby przynajmniej cofnąć naszą niestandardową strzałkę-pozostawiając domyślną strzałkę select nienaruszoną.
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
Wszyscy razem:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 15% no-repeat #eee;
}
/* CAUTION: IE hackery ahead */
select::-ms-expand {
display: none; /* remove default arrow in IE 10 and 11 */
}
/* target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background:none\9;
padding: 5px\9;
}
}<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>To rozwiązanie jest proste i ma dobrą obsługę przeglądarki-powinno wystarczyć.
Jeśli Obsługa przeglądarki ie9 - i firefox 34-jest konieczne to czytaj dalej...
Rozwiązanie # 2 obcięcie elementu select, aby ukryć domyślną strzałkę ( Demo )Zawiń element select W div o stałej szerokości i overflow:hidden.
Następnie nadaj elementowi select Szerokość około o 20 pikseli większą niż div.
Wynikiem jest to, że domyślna strzałka rozwijana elementu select będzie ukryta (ze względu na overflow:hidden na kontenerze), i możesz umieścić dowolny obraz tła, który chcesz po prawej stronie div.
[It należy jednak zauważyć, że jeśli niestandardowy element select jest niezbędny tylko dla urządzeń MOBILE - to powyższy problem nie ma zastosowania - ze względu na sposób, w jaki każdy telefon natywnie otwiera element select. Tak więc w przypadku urządzeń mobilnych może to być najlepsze rozwiązanie.]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(http://www.stackoverflow.com/favicon.ico) 96% / 20% no-repeat #eee;
}<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>Jeśli niestandardowa strzałka jest konieczna w Firefoksie-przed Wersja 35 - ale nie musisz obsługiwać starych wersji IE-to czytaj dalej...
Rozwiązanie # 3 - Użyj właściwości pointer-events (Demo )
Chodzi o to, aby nałożyć element na natywną strzałkę rozwijaną (aby utworzyć naszą niestandardową), a następnie wyłączyć na niej zdarzenia wskaźnika.
Zaleta: Działa dobrze w WebKit i Gecko. Wygląda też dobrze (bez wystających elementów option)
Wada: Internet Explorer (IE10 i w dół) nie obsługuje pointer-events , co oznacza, że nie można kliknąć niestandardowej strzałki. Inną (oczywistą) wadą tej metody jest to, że nie możesz kierować nowego obrazu strzałki za pomocą efektu najazdu lub kursora ręki, ponieważ właśnie wyłączyliśmy na nich zdarzenia wskaźnika!
Jednak za pomocą tej metody można użyć komentarza modernistycznego lub warunkowego, aby Internet Explorer powrócił do standardowego wbudowanego w strzałkę.
Uwaga: ponieważ Internet Explorer 10 nie obsługuje już conditional comments: jeśli chcesz użyć tego podejścia, prawdopodobnie powinieneś użyć Modernizr . Jednak nadal można wykluczyć zdarzenia wskaźnika CSS z Internet Explorera 10 za pomocą hack CSS opisanego tutaj .
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background: #fff;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(http://www.stackoverflow.com/favicon.ico) right / 90% no-repeat #fff;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-20 16:22:39
Jest to możliwe, ale niestety głównie w przeglądarkach opartych na Webkit w zakresie, w jakim my, jako programiści, wymagamy. Oto przykład stylizacji CSS pobrany z panelu Opcji Chrome za pomocą wbudowanego Inspektora narzędzi programistycznych, ulepszonego w celu dopasowania aktualnie obsługiwanych właściwości CSS w większości nowoczesnych przeglądarek: {]}
select {
-webkit-appearance: button;
-moz-appearance: button;
-webkit-user-select: none;
-moz-user-select: none;
-webkit-padding-end: 20px;
-moz-padding-end: 20px;
-webkit-padding-start: 2px;
-moz-padding-start: 2px;
background-color: #F07575; /* fallback color if gradients are not supported */
background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Fx (3.6 to 15) */
background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of IE 10*/
background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
color: #555;
font-size: inherit;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
Po uruchomieniu tego kodu na dowolnej stronie w przeglądarce opartej na Webkit należy zmienić wygląd pola wyboru, usunąć standardową strzałkę OS i dodać strzałkę PNG, umieścić kilka odstępy przed i po etykiecie, prawie wszystko, co chcesz.
Najważniejszą częścią jest właściwość appearance, która zmienia sposób zachowania elementu.
Działa doskonale w prawie wszystkich przeglądarkach opartych na Webkit, w tym mobilnych, chociaż Gecko nie obsługuje appearance, Jak się wydaje, tak samo jak Webkit.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-10 18:34:07
Element select i jego rozwijana funkcja są trudne do stylizacji.
atrybuty stylu dla elementu select autor: Chris Heilmann potwierdza to, co Ryan Dohery powiedział w komentarzu do pierwszej odpowiedzi:
" element select jest częścią system operacyjny, a nie Przeglądarka chrome. Dlatego jest bardzo zawodne do stylu, i niekoniecznie ma sens próbować w każdym razie."
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-20 16:41:04
Największą niespójnością, jaką zauważyłem podczas wyboru stylów, jest Safari i Google Chrome renderowanie (Firefox jest w pełni konfigurowalny przez CSS). Po kilku poszukiwaniach w niejasnych głębinach Internetu natknąłem się na następujące, co prawie całkowicie rozwiązuje moje skrupuły z WebKit:
Safari i Google Chrome fix :
select {
-webkit-appearance: none;
}
Powoduje to jednak usunięcie strzałki rozwijanej. Możesz dodać strzałkę rozwijaną za pomocą pobliskiego div z tłem, ujemnym marginesem lub absolutnie umieszczonym nad rozwijanym menu wybierz.
* Więcej informacji i inne zmienne są dostępne w właściwość CSS: - webkit-wygląd.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-10 00:03:43
<select> znaczniki mogą być stylizowane za pomocą CSS, tak jak każdy inny element HTML na stronie HTML renderowanej w przeglądarce. Poniżej znajduje się (zbyt prosty) przykład, który umieści element select na stronie i wyrenderuje tekst opcji na niebiesko.
Przykładowy plik HTML (selectExample.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
Przykładowy plik CSS (selectExample.css):
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-06 18:49:00
Miałem dokładnie ten problem, z tym, że nie mogłem korzystać z obrazów i nie był ograniczony obsługą przeglądarki. Powinno to być "na spec" i przy odrobinie szczęścia zacząć działać wszędzie w końcu .
Używa warstwowych obróconych warstw tła, aby "wyciąć" strzałkę rozwijaną, ponieważ pseudoelementy nie działają dla elementu select. Zamień "hotpink" na swój ulubiony kolor-używam zmiennej.
select {
font: 400 12px/1.3 "Helvetica Neue", sans-serif;
-webkit-appearance: none;
appearance: none;
border: 1px solid hotpink;
line-height: 1;
outline: 0;
color: hotpink;
border-color: hotpink;
padding: 0.65em 2.5em 0.55em 0.75em;
border-radius: 3px;
background: linear-gradient(hotpink, hotpink) no-repeat,
linear-gradient(-135deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
linear-gradient(-225deg, rgba(255,255,255,0) 50%, white 50%) no-repeat,
linear-gradient(hotpink, hotpink) no-repeat;
background-color: white;
background-size: 1px 100%, 20px 20px, 20px 20px, 20px 60%;
background-position: right 20px center, right bottom, right bottom, right bottom;
}<select>
<option>So many options</option>
<option>...</option>
</select>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-14 14:45:27
Post na blogu Jak CSS formularz rozwijany styl bez JavaScript u mnie działa, ale zawodzi w Operze chociaż:
select {
border: 0 none;
color: #FFFFFF;
background: transparent;
font-size: 20px;
font-weight: bold;
padding: 2px 10px;
width: 378px;
*width: 350px;
*background: #58B14C;
}
#mainselection {
overflow: hidden;
width: 350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}
<div id="mainselection">
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-25 20:01:36
Oto wersja, która działa we wszystkich nowoczesnych przeglądarkach. Kluczem jest użycie appearance:none, które usuwa domyślne formatowanie. Ponieważ całe formatowanie zniknęło, musisz dodać z powrotem strzałkę, która wizualnie odróżnia select od wejścia.
Przykład roboczy: https://jsfiddle.net/gs2q1c7p/
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
}
#mySelect {
border-radius: 0
}<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-01 20:27:54
select {
outline: 0;
overflow: hidden;
height: 30px;
background: #2c343c;
color: #747a80;
border: #2c343c;
padding: 5px 3px 5px 10px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 10px;
}
select option {border: 1px solid #000; background: #010;}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-25 19:57:42
Jeśli styl jest ważną kwestią, użycie całkowicie niestandardowego widżetu może pomóc, jak ten opisany w blogu Tworzenie listy rozwijanej za pomocą CSS i jQuery.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-25 20:02:57
W nowoczesnych przeglądarkach styl <select> w CSS jest stosunkowo bezbolesny. Z appearance: none jedyną trudną częścią jest wymiana strzałki (jeśli tego chcesz). Oto rozwiązanie, które używa wbudowanego URI data: z zwykłym tekstem SVG:
select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-repeat: no-repeat;
background-size: 0.5em auto;
background-position: right 0.25em center;
padding-right: 1em;
background-image: url("data:image/svg+xml;charset=utf-8, \
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
<polygon points='0,0 60,0 30,40' style='fill:black;'/> \
</svg>");
}<select>
<option>Option 1</option>
<option>Option 2</option>
</select>
<select style="font-size: 2rem;">
<option>Option 1</option>
<option>Option 2</option>
</select>Reszta stylizacji (obramowania, wyściółka, kolory itp.) jest dość prosta.
To działa we wszystkich przeglądarkach, które właśnie wypróbowałem (Firefox 50, Chrome 55, Edge 38 i Safari 10). Jedna uwaga o Firefoksie jest taka, że jeśli chcesz użyć znaku# w Uri danych (np. fill: #000) musisz go uciec (fill: %23000).Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-13 19:03:59
Dotarłem do twojej sprawy używając bootstrap . Jest to najprostsze rozwiązanie, które działa:
select.form-control {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-position: right center;
background-repeat: no-repeat;
background-size: 1ex;
background-origin: content-box;
background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
<form class="form-horizontal">
<select class="form-control">
<option>One</option>
<option>Two</option>
</select>
</form>
</section>Uwaga: rzeczy base64 są fa-chevron-down W SVG.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-05 04:01:38
Użyj właściwości clip, aby przyciąć obramowania i strzałkę elementu select, a następnie dodaj własne style zastępcze do owijarki:
<!DOCTYPE html>
<html>
<head>
<style>
select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select>
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>Użyj drugiego wyboru z zerowym kryciem, aby przycisk był klikalny:
<!DOCTYPE html>
<html>
<head>
<style>
#real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
#fake { position: absolute; opacity: 0; }
body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
</style>
</head>
<span>
<select id="real">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
<select id="fake">
<option value="">Alpha</option>
<option value="">Beta</option>
<option value="">Charlie</option>
</select>
</span>
</html>Współrzędne różnią się między Webkit i innymi przeglądarkami, ale @ Media query Może to pokryć.
Referencje
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:02:57
Edytuj ten element nie jest zalecany, ale jeśli chcesz spróbować, jest jak każdy inny element HTML.
Edit example:
/*Edit select*/
select {
/*css style here*/
}
/*Edit option*/
option {
/*css style here*/
}
/*Edit selected option*/
/*element attr attr value*/
option[selected="selected"] {
/*css style here*/
}
<select>
<option >Something #1</option>
<option selected="selected">Something #2</option>
<option >Something #3</option>
</select>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-21 17:48:28
Bardzo ładny przykład, który używa :after i :before do wykonania triku jest w Styling Select Box with CSS3 | CSSDeck
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-25 20:09:03
Tak. Możesz stylizować dowolny element HTML po jego nazwie, TAK:
select {
font-weight: bold;
}
Oczywiście, możesz również użyć klasy CSS do stylizacji go, jak każdy inny element:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-26 00:31:27
Zdecydowanie powinieneś to zrobić jak w Styling select, optgroup i options with CSS. Pod wieloma względami kolor tła i kolor są po prostu tym, czego zwykle potrzebujesz do opcji stylu, a nie całego wyboru.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-25 20:06:58
label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: black;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: lightblue;
}
To używa koloru tła dla zaznaczonych elementów i usunąłem obraz..
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-09-25 20:08:08
[[2]}począwszy od Internet Explorera 10, możesz użyć ::-ms-expand selektor pseudo elementu do stylowania i ukrywania rozwijanego elementu strzałki.
select::-ms-expand {
display:none;
/* or visibility: hidden; to keep it's space/hitbox */
}
Pozostała stylizacja powinna być podobna do innych przeglądarek.
Oto podstawowy fork Jsfiddle Danielda, który stosuje wsparcie dla IE10
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-12-09 21:50:16
Oto rozwiązanie oparte na moich ulubionych pomysłach z tej dyskusji. Umożliwia to stylizację elementu bezpośrednio bez żadnych dodatkowych znaczników.
Działa IE10 + z bezpiecznym zabezpieczeniem dla IE8 / 9. Jednym z zastrzeżeń dla tych przeglądarek jest to, że obraz tła musi być umieszczony i wystarczająco mały, aby ukryć się za natywną kontrolą rozwiń.
HTML
<select name='options'>
<option value='option-1'>Option 1</option>
<option value='option-2'>Option 2</option>
<option value='option-3'>Option 3</option>
</select>
SCSS
body {
padding: 4em 40%;
text-align: center;
}
select {
$bg-color: lightcyan;
$text-color: black;
appearance: none; // using -prefix-free http://leaverou.github.io/prefixfree/
background: {
color: $bg-color;
image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
position: right;
repeat: no-repeat;
}
border: {
color: mix($bg-color, black, 80%);
radius: .2em;
style: solid;
width: 1px;
right-color: mix($bg-color, black, 60%);
bottom-color: mix($bg-color, black, 60%);
}
color: $text-color;
padding: .33em .5em;
width: 100%;
}
// Removes default arrow for IE10+
// IE 8/9 get dafault arrow which covers caret image
// as long as caret image is small than and positioned
// behind default arrow
select::-ms-expand {
display: none;
}
Codepen
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-29 13:50:37
Istnieje sposób na stylowanie znaczników SELECT.
Jeśli w znaczniku znajduje się parametr "size", zastosuje się prawie każdy CSS. Używając tej sztuczki, stworzyłem fiddle, który jest praktycznie odpowiednikiem normalnego znacznika select, plus wartość może być edytowana ręcznie jak ComboBox w językach wizualnych(chyba że umieścisz readonly w znaczniku input).
Więc oto minimalny przykład, aby zobaczyć zasadę stojącą za:
(będziesz potrzebował jQuery do klikania mechanizm):
<style>
/* only these 2 lines are truly required */
.stylish span {position:relative;}
.stylish select {position:absolute;left:0px;display:none}
/* now you can style the hell out of them */
.stylish input { ... }
.stylish select { ... }
.stylish option { ... }
.stylish optgroup { ... }
</style>
...
<div class="stylish">
<label> Choose your superhero: </label>
<span>
<input onclick="$(this).closest('div').find('select').slideToggle(110)">
<br>
<select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">
<optgroup label="Fantasy"></optgroup>
<option value="gandalf">Gandalf</option>
<option value="harry">Harry Potter</option>
<option value="jon">Jon Snow</option>
<optgroup label="Comics"></optgroup>
<option value="tony">Tony Stark</option>
<option value="steve">Steven Rogers</option>
<option value="natasha">Natasha Romanova</option>
</select>
</span>
</div>
Oto skrzypce z kilkoma stylami: https://jsfiddle.net/dkellner/7ac9us70/
(to oczywiście przesada, tylko po to, by zademonstrować możliwości.)
Zauważ, że znaczniki nie zawierają opcji należących do nich tak, jak normalnie powinny; tak, jest to celowe, jest to dla stylizacji. (Dobrze wychowany sposób byłby o wiele mniej stylowy.) I tak działają doskonale w ten sposób.
Zanim ktoś wskaże poza częścią NO-JS: wiem, że pytanie brzmiało "bez Javascript". Dla mnie jest to bardziej proszę nie przejmować się wtyczkami, wiem, że mogą to zrobić, ale potrzebuję natywnego sposobu . Zrozumiano, bez wtyczek, bez dodatkowych skryptów, tylko to, co mieści się wewnątrz tagu "onclick". Jedyną zależnością jest jQuery, aby uniknąć natywnego " dokumentu.parentNode.getElementsByTagName " szaleństwo. Ale to może tak działać. Tak więc tak, jest to natywny znacznik wyboru z natywnym stylowaniem i niektórymi programami obsługi onclick. On najwyraźniej nie "rozwiązanie Javascript".
Smacznego!Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-12 11:56:59
Druga metoda w odpowiedzi Danielda ( https://stackoverflow.com/a/13968900/280972 ) Można ulepszyć, aby pracować z efektami najazdu i innymi zdarzeniami myszy. Upewnij się tylko, że element "button"pojawia się zaraz po elemencie select w znacznikach. Następnie kieruj go za pomocą selektora css:
HTML:
<select class="select-input">...</select>
<div class="select-button"></div>
CSS:
.select-input:hover+.select-button {
[hover styles here]
}
Spowoduje to jednak wyświetlenie efektu najechania kursorem na element select, a nie tylko na przycisk.
Używam ta metoda w połączeniu z Angular (ponieważ mój projekt i tak jest Angular-app), aby pokryć cały element select i pozwolić Angular wyświetlić tekst wybranej opcji w"przycisku" -element. W tym przypadku ma sens, że efekt najechania kursorem ma zastosowanie, gdy znajduje się on w dowolnym miejscu nad zaznaczeniem. To nie działa bez javascript choć, więc jeśli chcesz to zrobić, a Twoja strona ma działać bez javascript, należy upewnić się, że skrypt dodaje elementy i zajęcia niezbędne do ulepszenia. W ten sposób przeglądarka bez javascript po prostu otrzyma normalną, niestylowaną, select, zamiast stylizowanej plakietki, która nie aktualizuje się poprawnie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:34:51
Możesz również dodać styl najazdu do rozwijanego menu.
select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>A CSS & HTML only solution
Wydaje mi się kompatybilny z Chrome, Firefox i IE11. Ale proszę zostawić swoją opinię dotyczącą innych przeglądarek internetowych.
Zgodnie z sugestią @Danield answer, zawijam mój select w div (nawet dwa divy dla kompatybilności z x-browser), aby uzyskać oczekiwane zachowanie.
Zobacz też http://jsfiddle.net/bjap2/
HTML:
<div class="sort-options-wrapper">
<div class="sort-options-wrapper-2">
<select class="sort-options">
<option value="choiceOne">choiceOne</option>
<option value="choiceOne">choiceThree</option>
<option value="choiceOne">choiceFour</option>
<option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
</select>
</div>
<div class="search-select-arrow-down"></div>
</div>
Zwróć uwagę na 2 opakowania div. Zwróć również uwagę na dodatkowy div dodany, aby umieścić przycisk strzałki w dół gdziekolwiek lubisz (ustawiony absolutnie), tutaj kładziemy go po lewej stronie.
CSS
.sort-options-wrapper {
display: inline-block;
position: relative;
border: 1px solid #83837f;
}
/* this second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
overflow: hidden;
}
select {
margin-right: -19px; /* that's what hidding the default-provided browser arrow */
padding-left: 13px;
margin-left: 0;
border: none;
background: none;
/* margin-top & margin-bottom must be set since some browser have default values for select elements */
margin-bottom: 1px;
margin-top: 1px;
}
select:focus {
outline: none; /* removing default browsers outline on focus */
}
.search-select-arrow-down {
position: absolute;
height:10px;
width: 12px;
background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
left: 1px;
top: 5px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-07 08:47:55