Как скрыть стрелку вниз в IE8 и IE9?

Ответ 1

Вы попросили решение для IE8 и IE9.

Пусть начнется с IE8. Короткий ответ: Это невозможно. Из-за того, как IE8 и более ранние окна выбора делают, вы просто не можете скрыть стрелку раскрывающегося списка. Элементы управления в блоке невозможно стилизовать в старом IE и всегда отображаться над любым другим контентом.

Там просто нет никакого решения, кроме переписывания всего элемента управления select в Javascript.

Теперь IE9. Вы можете скрыть стрелку со стрелкой. Это не стандартная вещь, но вы можете ее взломать.

Вам нужно начать с элемента оболочки (например, <div>) вокруг вашего окна выбора. Затем вы можете создать стиль с помощью селектора :before, чтобы поместить дополнительный бит содержимого в верхнюю часть стрелки, эффективно скрывая его.

Здесь CSS:

div {
    position:relative;
    display:inline-block;
    z-index:0
}
div select {
    z-index:1;
}

div:before {
    display:block;
    position:absolute;
    content:'';
    right:0px;
    top:0px;
    height:1em;
    width:1em;
    margin:2px;
    background:red;
    z-index:5;
}

... и см. здесь для jsFiddle, чтобы увидеть его в действии.

Примечание. Я использовал red как цвет наложения, чтобы сделать очевидным, что происходит. Очевидно, что при обычном использовании вы хотите использовать белый цвет, чтобы он не выделялся.

Вы также заметите, что, как я сказал выше, это не работает в IE8.

Очевидно, что это не то же самое, что "правильное" решение для IE10 и других браузеров, которые фактически удаляют стрелку; все, что мы здесь делаем, скрывает это. А это означает, что мы закончили раздражающим белым патчем в конце окна выбора, где раньше была стрелка.

Мы можем сделать следующий стиль, чтобы решить эту проблему: например, если мы сделаем элемент контейнера фиксированной шириной и overflow:hidden, мы можем избавиться от белого патча, но тогда у нас есть проблемы с границами нашего поля выбора, сломанный, поэтому нам нужно делать дальнейшие стилистические исправления; все может стать немного беспорядочным. Плюс, конечно, этот параметр работает только в том случае, если сам поле выбора является известной фиксированной шириной.

Итак, у вас есть: есть варианты для этого в IE9. Однако они не очень хороши, и, честно говоря, они могут не стоить усилий. Но если вы в отчаянии, вы можете это сделать.

О, и не забудьте сделать этот код CSS конкретным, поэтому он работает только в IE9, иначе это вызовет проблемы в других браузерах.

Ответ 2

Вы не можете удалить стрелку в чистом CSS для IE9 <. Поэтому они сделали ::-ms-expand для IE10.

Вы могли бы, однако, сделать что-то подобное. jsFiddle здесь

В этом примере вы установите фиксированный width на select и оберните div нижними width и overflow:hidden, чтобы скрыть/скрыть раскрывающийся список. Он имеет полную поддержку. Это существенно делает скрывать стрелку во всех браузерах.

CSS

div {
    width: 80px;
    overflow: hidden;
    border: 1px solid black;
}
select {
    width: 100px;
    border: 0px;
}

Ответ 3

Единственный способ добиться этого в более старых версиях IE - обернуть <select> в чуть меньший контейнер и установить overflow: hidden;. Это скроет стрелку с правой стороны, но все же позволит вам открыть раскрывающийся список щелкнув по нему. Это грязно, но это единственный способ выполнить то, что вы хотите.

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

Ответ 4

не уверен в каждом случае использования, но в моем случае с фиксированной шириной x height bg pic, настроенной для родителя, это тоже работало для IE и FF:

HTML

<div id="parent">
  <select>
    ...
  </select>
</div>

CSS

#parent{
  ...
  overflow: hidden;
  width:100px; // for example
}

#parent select{
  ...
  width:120px;
}

jsfiddle

Ответ 5

Еще один плохой, но функциональный спаситель для IE9: D

Предварительный просмотр

//CSS

div {
    position:relative;
    display:inline-block;
    border:solid black 1px;
    z-index:0
}
div select {
    z-index:1;
    border:none;
    width:200px;
}

div:before {
    display:block;
    position:absolute;
    content:url('http://help.eclipse.org/mars/topic/org.eclipse.stardust.docs.enduser/html/handbooks/execution-clients/rules/images/arrow.png');
    right:-2px;
    top:-1px;
    padding-left:2px;
    height:18px;
    width:15px;
    margin:2px;
    background:white;
    z-index:445;
    border: 0;
}

Все, что вам нужно, это инкапсулировать этот код с помощью этого взлома медиа-запросов IE9

/* IE9 */
    @media screen and (min-width:0\0) {

    }
/* IE9 */

jsFiddle