Выберите изменение стиля стрелки
Я пытаюсь заменить стрелку выбора с моей собственной фотографией. Я включаю выбор в div с одинаковым размером, я устанавливаю фон выбора как прозрачный, и я включаю изображение (с тем же размером, что и стрелка) в правом верхнем углу div как фон.
Он работает только в Chrome.
- MySQL SELECT LIKE или REGEXP для сопоставления нескольких слов в одной записи
- Объединить несколько дочерних строк в одну строку MYSQL
- MySQL выбирает оператор с CASE или IF ELSEIF? Не уверен, как получить результат
- Разница MySQL между двумя строками оператора SELECT
- Выбор данных с несколькими условиями
Как я могу заставить его работать в Firefox и IE9, где я получаю это:
.styled-select { width: 100px; height: 17px; overflow: hidden; overflow: -moz-hidden-unscrollable; background: url(images/downarrow_blue.png) no-repeat right white; border: 2px double red; display: inline-block; position: relative; } .styled-select select { background: transparent; -webkit-appearance: none; width: 100px; font-size: 11px; border: 0; height: 17px; position: absolute; left: 0; top: 0; } body { background-color: #333333; color: #FFFFFF; } .block label { color: white; }
- mySQL возвращает все строки, когда поле = 0
- Лучший способ отменить выбор в jQuery?
- Вставка данных в таблицу с результатом другого запроса выбора
- Как получить 5 записей в SqLite?
- MySQL - SQL_BIG_SELECTS
- Сортировка по порядку значений в предложении select в разделе «in» в mysql
- Как фильтровать массив объектов на основе значений во внутреннем массиве с jq?
- Выделить все столбцы, кроме одного в MySQL?
Вы пробовали что-то вроде этого:
.styled-select select { -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ appearance:none; }
Не тестировали, но должны работать.
EDIT : похоже, что Firefox не поддерживает эту функцию до версии 35 ( подробнее здесь )
Здесь есть обходной путь, посмотрите на jsfiddle на этом посту.
Вот элегантное исправление, которое использует диапазон, чтобы показать значение.
Макет выглядит следующим образом:
JsFiddle
Работа с одним classом:
select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; -webkit-appearance: none; background-position-x: 244px; }
Я настроил select с пользовательской стрелкой, подобной ответу Julio, однако он не имеет установленной ширины и использует svg в качестве фонового изображения. ( arrow_drop_down из arrow_drop_down material-ui)
select { -webkit-appearance: none; -moz-appearance: none; background: transparent; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position-x: 100%; background-position-y: 5px; border: 1px solid #dfdfdf; border-radius: 2px; margin-right: 2rem; padding: 1rem; padding-right: 2rem; }
Если вам нужно, чтобы он также работал в IE, обновите svg arrow до base64 и добавьте следующее:
select::-ms-expand { display: none; } background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
Это будет хорошо работать специально для тех, кто использует Bootstrap, проверенный в последних версиях браузера:
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Some browsers will not display the caret when using calc, so we put the fallback first */ background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat 98.5% !important; /* !important used for overriding all other customisations */ background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") white no-repeat calc(100% - 10px) !important; /* Better placement regardless of input width */ }
Проверьте это. Это взломанно, просто:
- Устанавливать
-prefix-appearancenoneудалять стили - Используйте
text-indentдля «нажимать» содержимое немного вправо - Наконец, установите
text-overflowв пустую строку. Все, что выходит за пределы его ширины, станет … ничего! И это включает стрелку.
Теперь вы можете стилизовать его так, как хотите 🙂
Вот мой пример jsfiddle: http://jsfiddle.net/AEt5k/1/
Создайте ярлык с помощью CSS и используйте события указателя:
и относительный CSS
label:after { content:'\25BC'; display:inline-block; color:#000; background-color:#fff; margin-left:-17px; /* remove the damn :after space */ pointer-events:none; /* let the click pass trough */ }
Я просто использовал стрелку вниз, но вы можете установить блок с фоновым изображением. Вот пример уродливой скрипки: https://jsfiddle.net/1rofzz89/
Он работает во всех браузерах:
select { width: 268px; padding: 5px; font-size: 16px; line-height: 1; border: 0; border-radius: 5px; height: 34px; background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd; appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; /* Safari and Chrome */ background-position-x: 244px; }