CSS для ВЫБРАННОГО элемента

#html #css #select

#HTML #css #выберите

Вопрос:

В настоящее время я пытаюсь правильно оформить элемент SELECT в стиле CSS.

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

В настоящее время он отображается как: ЗНАЧЕНИЕ [V], где [V] — кнопка с треугольником / стрелкой. Я хочу создать интервал между концом ЗНАЧЕНИЯ, каким бы оно ни было, и кнопкой [V] / частью элемента выбора. Поле, очевидно, не имеет значения, и заполнение также выполняется за пределами [V].

Поскольку у меня есть несколько ВЫБРАННЫХ — есть ли «ЧИСТЫЙ» или «ЭЛЕГАНТНЫЙ» способ сделать это с помощью CSS, отличный от индивидуального задания ширины каждому из этих элементов?

С уважением, Дж.Кампос

Ответ №1:

Почему вы не можете использовать заполнение? Кажется, он делает то, что вам нужно.. Проверьте это:

http://jsfiddle.net/GYyKh/1/

1. Хорошо, итак, ответ заключается в том, чтобы стилизовать не SELECT, а скорее OPTION. Понятия не имею, почему я об этом не подумал. Любительский блюз, я думаю. Большое спасибо за предупреждение.

2. Это не работает… Изменение этого размера заполнения никак не влияет на пробел, где заканчивается слово в опции и начинается стрелка выпадающего списка

3. @Matt ты прав.. это работает только в Firefox. Извините, Соткра.. Я посмотрю еще раз позже.. когда я не работаю

Ответ №2:

Сделайте так, чтобы у вашего элемента select был класс, чтобы вы могли вызывать его из вашего css. Затем сделайте что-то вроде

 .spacer {
    width:500px;
}

Это придаст всем элементам с этим именем класса указанную вами ширину

Ответ №3:

Возможно, вы найдете эту статью полезной:http://css-tricks.com/select-cuts-off-options-in-ie-fix /

Он предлагает различные возможности с JavaScript.