Как убрать стрелку из выбранного элемента в Firefox

Question

Я пытаюсь стилизовать элемент select с помощью CSS3.Я получаю желаемые результаты в WebKit (Chrome / Safari), но Firefox играет не очень хорошо (я даже не беспокоюсь о IE).Я использую свойство CSS3 appearance, но по какой-то причине я не могу выкинуть выпадающий значок из Firefox.

Вот пример того, что я делаю: http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

Как видите, я не пытаюсь сделать что-то необычное.Я просто хочу удалить стили по умолчанию и добавить собственную стрелку раскрывающегося списка.Как я уже сказал, отлично подходит для WebKit, не очень хорошо для Firefox.Видимо, -moz-appearance: none не избавляется от выпадающего элемента.

Есть идеи?Нет, JavaScript не вариант

Answer 1

Вы можете увеличить ширину поля и переместить стрелку ближе к левому краю стрелки.тогда это позволяет вам покрыть стрелку пустым белым делителем.

Посмотрите: http://jsbin.com/aniyu4/86/edit

Answer 2

hackity hack ... решение, которое работает во всех протестированных мной браузерах (Safari, Firefox, Chrome).У вас не должно быть никаких IE, поэтому было бы неплохо, если бы вы могли протестировать и прокомментировать:

<div class="wrapper">
  <select>
    <option>123456789</option>
    <option>234567890</option>
  </select>
</div>

CSS, с изображением в кодировке URL:

.wrapper { position:relative; width:200px; }
.wrapper:after {
  content:"";
  display: block;
  position: absolute;
  top:1px; height:28px;
  right:1px; width:16px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAcCAYAAACH81QkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODgwMTE3NDA3MjA2ODExOEE2RENENTU2MTFGMEQ1RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpGNDE5NDQ3Nzc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpGNDE5NDQ3Njc5ODIxMUU0OEU0M0JFMzgzMkUxOTk3MiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDg4MDExNzQwNzIwNjgxMThBNkRDRDU1NjExRjBENUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4o7anbAAAAjklEQVR42uzUsQ3EIAwFUPty7MBOsAoVC7EVYgyUSFcdzn0iJYquAZGSLxnLzatsWERWGsvGP0QGkc+LxvN9AqGJTKQJMcYQM/+VtbZdiTGKUgr3cxbmlJI0ZiW83vsbgrkjB5JzFq11BdAxdyNICKEi6J25kFKKOOdq70We+JS2ufYTacjyxrKMLtsuwAAznzqGLHX9BwAAAABJRU5ErkJggg==);

  pointer-events: none;
}

select {
  width: 100%;
  padding:3px;
  margin: 0;
  border-radius: 0;
  border:1px solid black;
  outline:none;
  display: inline-block;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  cursor:pointer;
  float:none!important;
  background:white;

  font-size:13px;
  line-height: 1em;
  height: 30px;
  padding:6px 20px 6px 10px;
}

http://codepen.io/anon/pen/myPEBy

Я использую элемент: after, чтобы покрыть уродливую стрелку.Так как select не поддерживает: после, мне нужна оболочка для работы.Теперь, если вы нажмете на стрелку, выпадающий список не зарегистрирует его ... если ваш браузер не поддерживает pointer-events: none, что делают все, кроме IE10: http://caniuse.com/#feat=pointer-events

Так что для меня это идеально -хорошее, чистое решение с низкой головной болью, по крайней мере, по сравнению со всеми другими опциями, которые включают в себя javascript.

tl; dr:

Если IE10 (или ниже)Пользователи нажимают на стрелку, это не будет работать.Работает достаточно хорошо для меня ...

Answer 3

Ответ Джордана Янга самый лучший.Но если вы не можете или не хотите изменять свой HTML, вы можете просто удалить пользовательскую стрелку вниз, используемую в Chrome, Safari и т. Д., И оставить стандартную стрелку Firefox, но без двойных стрелок.Не идеально, но хорошее быстрое исправление, которое не добавляет HTML и не нарушает ваш внешний вид в других браузерах.

<select>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

CSS:

select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
  select {
    background-image: none;
  }
}

Answer 4

Примете ли вы незначительные изменения в html?

Что-то вроде размещения тега div, содержащего тег select.

Посмотрите.

Answer 5

Или, вы можете обрезать выбор.Что-то вроде:

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

Это должно обрезать 30 пикселей правой части поля выбора, убрав стрелку.Теперь добавьте фоновое изображение 170px и вуаля в стиле select

Answer 6

Это огромный взлом, но -moz-appearance: menulist-text может помочь.

Answer 7

Другие ответы мне не помогли, но я нашел этот взлом.У меня это сработало (июль 2014)

Answer 8

У меня была такая же проблема. Легко заставить его работать на FF и Chrome, но на IE (8+, который мы должны поддерживать) все усложняется. Самое простое решение, которое я мог найти для пользовательских элементов выбора, которые работают «везде, где я пробовал», включая IE8, - это использование .customSelect ()

Answer 9

Полезным для меня хаком является установка (выбор) дисплея на inline-flex.Вырезает стрелку прямо из моей кнопки выбора.Без всего добавленного кода.

• Только для Fx.-webkit appearance все еще требуется для Chrome и т. Д. *

Answer 10

Свойство appearance из CSS3 не допускает значение none. Взгляните на ссылку W3C . Итак, то, что вы пытаетесь сделать, недопустимо (действительно, Chrome тоже не должен принимать это).

Тогда, к сожалению, у нас действительно нет кросс-браузерного решения, чтобы скрыть эту стрелку, используя чистый CSS. Как указано, вам понадобится JavaScript.

Я предлагаю вам рассмотреть возможность использования selectBox jQuery plugin . Это очень легко и красиво сделано.