Question

我有一个选择元素：

<div class="select"> 
    <select id="relationship" name="relationship">
        <option value="">one</option>
        <option value="">two</option>
        <option value="">three</option>
    </select>
</div>

使用这个CSS：

.select {
    font-family: 'irregularisregular',Arial,sans-serif;
    font-size: 2.5em;
    height: 1.7em;
    margin: 0.15em 0.5em;
    padding: 0 1em;
    width: 40%;
}

.select select {
    -moz-appearance: window;
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: hidden;
    width: 100%;
}

当我单击选择时，会出现选项，但该块与选择块的大小不同。我不知道要改变什么，所以两个块<select>和<option>具有相同的宽度。

Answer 1

除了你拥有的其他CSS之外，为了确保select和它的选项具有相同的宽度，你应该在以下行中添加一些东西：

select, select option {
   width: 200px; /* change as needed */
}

Answer 2

提到的两个块具有相同的宽度。它只是你的父div（.select）中的填充，而'select'上没有边框，这使得它“看起来”更大就是它。

自定义<select>和<option>元素</option> </select>

2 个答案: