Я хотел бы создать настраиваемое раскрывающееся меню, которое работает во всех браузерах. Я создал его здесь, но стрелка не может быть нажата. Если я установил его как фон для выбора, то firefox перезапишет стрелку поверх нее. Может ли кто-нибудь сказать мне, что лучший способ получить выпадающее меню, которое работает во всех браузерах, и как сделать эту ручку кликабельной без Javascript?
CSS
#menulist {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
height:32px;
border:1px solid #000;
width:260px;
text-indent: 8px;
}
.arrow{
cursor:pointer;
height:32px;
width:24px;
position:absolute;
right:0px;
background-color:#c8c8c8;
background:url('http://icons.aniboom.com/Energy/Resources/userControls/TimeFrameDropDownFilter/Dropdown_Arrow.png') 0;
}
HTML:
<span style="position:relative;" >
<span class="arrow" ></span>
<select id="menulist">
<option value="one">One</option>
<option value="two">Two</option>
</select>
</span>
Это очень просто, вам просто нужно добавить фоновое изображение к элементу select и поместить его туда, где вам нужно, но не забудьте добавить:
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
Согласно http://shouldiprefix.com/#appearance
Microsoft Edge и IE поддерживают эту ширину этого свойства как префикс -webkit-pre, а не -ms- для аргументов interop.
Я только что сделал эту скрипку http://jsfiddle.net/drjorgepolanco/uxxvayqe/
В соответствии со ссылкой: http://bavotasan.com/2011/style-select-box-using-only-css/ есть много дополнительных доработок, которые необходимо выполнить (добавьте дополнительный div и разместите изображение там. Также будет разбит дизайн поскольку параметр детализации будет неверным для выбора.
Вот простой и простой способ, который позволит вам разместить собственное раскрывающееся изображение и удалить раскрывающееся меню по умолчанию для браузера (без использования дополнительного div). Его перекрестный браузер.
HTML
<select class="dropdown" name="drop-down">
<option value="select-option">Please select...</option>
<option value="Local-Community-Enquiry">Option 1</option>
<option value="Bag-Packing-in-Store">Option 2</option>
</select>
CSS
select.dropdown {
margin: 0px;
margin-top: 12px;
height: 48px;
width: 100%;
border-width: 1px;
border-style: solid;
border-color: #666666;
padding: 9px;
font-family: tescoregular;
font-size: 16px;
color: #666666;
-webkit-appearance: none;
-webkit-border-radius: 0px;
-moz-appearance: none;
appearance: none;
background: url('yoururl/dropdown.png') no-repeat 97% 50% #ffffff;
background-size: 11px 7px;
}
Вы можете проверить плагин Select2:
http://ivaynberg.github.io/select2/
Select2 - это замена на основе jQuery для отдельных полей. Он поддерживает поиск, удаленные наборы данных и бесконечную прокрутку результатов.
Это довольно популярный и очень удобный. Он должен покрывать большинство ваших потребностей, если не все.
pointer-events может быть полезен для этой проблемы, так как вы могли бы поместить div над кнопкой со стрелкой, но все же сможете нажать кнопку со стрелкой.
pointer-events css позволяет щелкнуть по div.
Однако этот подход не будет работать для версий IE старше IE11. Вы могли бы что-то работать в IE8 и IE9, если элемент, который вы помещаете поверх кнопки со стрелкой, является элементом SVG, но будет сложнее стилизовать кнопку так, как вы хотите продолжить это.
Вот пример скрипта Js: http://jsfiddle.net/e7qnqzx6/2/
<select class="dropdownmenu" name="drop-down">
<option class="dropdownmenu_list1" value="select-option">Choose ...</option>
<option class="dropdownmenu_list2" value="Topic 1">Option 1</option>
<option class="dropdownmenu_list3" value="Topic 2">Option 2</option>
</select>
Это лучше всего работает в Firefox. Жаль, что Chrome и Safari не поддерживают этот довольно простой стиль CSS.
У меня тоже была аналогичная проблема. Наконец, найдено одно решение в https://techmeals.com/fe/info/htmlcss/4/How-to-customize-the-select-drop-down-in-css-which-works-for-all-the-browsers
Примечание:
1) Для поддержки Firefox есть специальная обработка CSS для родителя элемента SELECT, пожалуйста, присмотритесь.
2) Загрузите down.png из Down.png
CSS-код
/* For Firefox browser we need to style for SELECT element parent. */
@-moz-document url-prefix() {
/* Please note this is the parent of "SELECT" element */
.select-example {
background: url('https://techmeals.com/external/images/down.png');
background-color: #FFFFFF;
border: 1px solid #9e9e9e;
background-size: auto 6px;
background-repeat: no-repeat;
background-position: 96% 13px;
}
}
/* IE specific styles */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active)
{
select.my-select-box {
padding: 0 0 0 5px;
}
}
/* IE specific styles */
@supports (-ms-accelerator:true) {
select.my-select-box {
padding: 0 0 0 5px;
}
}
select.my-select-box {
outline: none;
background: #fff;
-moz-appearance: window;
-webkit-appearance: none;
border-radius: 0px;
text-overflow: "";
background-image: url('https://techmeals.com/external/images/down.png');
background-size: auto 6px;
background-repeat: no-repeat;
background-position: 96% 13px;
cursor: pointer;
height: 30px;
width: 100%;
border: 1px solid #9e9e9e;
padding: 0 15px 0 5px;
padding-right: 15px\9; /* This will be apllied only to IE 7, IE 8 and IE 9 as */
*padding-right: 15px; /* This will be apllied only to IE 7 and below. */
_padding-right: 15px; /* This will be apllied only to IE 6 and below. */
}
HTML-код
<div class="select-example">
<select class="my-select-box">
<option value="1">First Option</option>
<option value="2">Second Option</option>
<option value="3">Third Option</option>
<option value="4">Fourth Option</option>
</select>
</div>