Как использовать div для эмуляции границы для ‹select›?

Я пытаюсь предоставить границу для тега select и последние 2 часа рву на себе волосы.

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

Проще говоря, у меня есть

<div style="position:relative; border:1px solid #cc0000;">
    <select style="position:absolute;">
        <option>1</option>
    </select>
</div>

Кажется, это не работает... Div автоматически расширяется до ширины родительского div, а не до ширины его содержимого.

Как мне настроить div так, чтобы он автоматически соответствовал содержимому поля выбора и имел границу в 1 пиксель, не выходя из рамки?

Если вам нужно больше кода, скажите об этом.

Любая помощь приветствуется. :)

ИЗМЕНИТЬ

Вот еще код...

HTML:

<div class="orderQuantity">
    <label for="quantity" class="orderInputLabel">Quantity:</label>
    <div> <!--THIS IS THE DIV THAT NEEDS A BORDER!! -->
        <select id="quantity_cs" name="quantity_cs" autocomplete="off" class="required">
            <option value=''>&#160;&#160;&#160;&#160;&#160;</option>
            <option value='10'>10</option>
            <option value='20'>20</option>
            <option value='30'>30</option>
            <option value='40'>40</option>
            <option value='50'>50</option>
            <option value='60'>60</option>
            <option value='70'>70</option>
            <option value='80'>80</option>
            <option value='90'>90</option>
            <option value='100'>100</option>
        </select>
    </div> <!-- end of div that needs border -->
</div>

CSS:

.orderQuantity {
    margin-top: 12px; 
}

Это все, что у меня есть на данный момент. Я пробовал множество вещей, ни одна из которых не сработала. В том числе сделать выбор абсолютным, а родительский div относительным и наоборот.

Помощь? Д:


html css css-position positioning
person wo0kie    schedule 15.02.2011    source источник
comment
По какой причине вы не можете поместить стиль границы непосредственно в элемент Select?   -  person jerebear    schedule 15.02.2011
comment
Должен быть кроссбраузерным.   -  person wo0kie    schedule 15.02.2011
comment
Пожалуйста, предоставьте некоторый код, а пока попробуйте плавать влево для родительского div поля выбора.   -  person Mahima    schedule 15.02.2011
comment
Плавающий левый элемент вызывал проблемы со встроенным элементом. Использовал очистку, чтобы исправить это, но все еще не очень хорошо работал с IE.   -  person wo0kie    schedule 15.02.2011
comment
Обычно я советую не пытаться стилизовать элемент select. Если вам нужна настройка, вы должны использовать разные элементы. Я предлагаю переключатели или флажки.   -  person zzzzBov    schedule 15.02.2011

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете использовать jQuery для этого. Кроссбраузерная совместимость. Проверьте рабочий пример http://jsfiddle.net/Npv8P/2/.

person Hussein    schedule 15.02.2011
comment
Возможно, это только я, но все, что я вижу, это граница сверху и слева от выбора? :С - person wo0kie; 15.02.2011
comment
@wo0kie, попробуй еще раз. Добавил немного отступов. - person Hussein; 15.02.2011
comment
Выглядит хорошо, за исключением того, что мне нужен способ удалить его, и мне нужно, чтобы он выровнялся по бокам окна выбора. :) - person wo0kie; 15.02.2011
comment
Он отвечает на него, но не с абсолютным или относительным позиционированием, что мне и нужно. - person wo0kie; 15.02.2011

arrow_upward
0
arrow_downward

Я нашел решение, которое включает поплавки и «очистить: оба», которые, похоже, работают в кросс-браузере.

<div style="float:left;"> <!-- just toggle border on this div using jquery -->
    <select>
       <option>1</option>
    </select>
</div>

<div style="clear:both;"></div>

Кажется, работает нормально. Спасибо Махиме за подтверждение того, что я пытался, и Хусейну за помощь. :)

person wo0kie    schedule 15.02.2011