HTML Select box - избавление от стрелки и ее пространства

0

Я пытаюсь избавиться от стрелки окна выбора и всех ее трасс, как это пространство для этой стрелки, например.

Вот скрипка: http://jsfiddle.net/kud7Z/

Я спрятал стрелку, используя этот CSS:

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

Однако по-прежнему есть пробел справа от поля выбора. Как я могу избавиться от него?

Теги:

2 ответа

1
Лучший ответ

Выбирать коробки, как правило, сложно.

Я нашел эту технику приятной, простой и хорошо работающей кросс-браузер: http://bavotasan.com/2011/style-select-box-using-only-css/

По сути, вы поворачиваете выделение прозрачным и помещаете его в немного меньшую, переполненную скрытую оболочку <div> с вашим стилем поля. Это отбрасывает правую сторону поля выбора и оставляет только ваши визуальные стили.

Поделиться
  • 0
    Это, кажется, единственный способ ... Спасибо
0

Try -moz-appearance: listbox; вместо none. Положитесь на box-shadow а не на border чтобы рисовать границы, так как border приведет к появлению кнопки выпадающего меню.

select {
    -moz-appearance: listbox;
    box-shadow: 0 0 0 1px gray;    
}

Так выглядит в Firefox 25 (Mac):

Изображение 174551

Кроме того, вы можете найти следующую страницу полезной, вы можете попробовать различный valuse для -moz-появления в зависимости от того, чего вы пытаетесь достичь.

https://developer.mozilla.org/en-US/docs/Web/CSS / -moz-appearance

Поделиться
  • 0
    Это даже показывает стрелку снова, которая противоположна тому, что я пытаюсь достичь jsfiddle.net/XBUwD
  • 0
    какую версию Firefox вы используете? собираюсь обновить ответ скриншотом.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню