选择选项相同的宽度

Question

http://jsfiddle.net/73vbu0kg/

select { 
    -moz-appearance: none; 
    border: 1px solid #333; 
    color: #999; 
    display: inline-block; 
    font-size: 12px; 
    height: 39px; 
    padding: 0 15px; 
    vertical-align: top; 
    width: 218px; 
} 
select option { 
    padding: 7px 15px; 
} 

为什么选项字段比选择更广泛？你如何适应相同的宽度选择和相同的文本填充选项？

Answer 1

你隐藏的文字标识溢出的原因。如果删除宽度，它将扩展到需要显示所有option值的宽度。如果你不想选择更大然后是留给你改变font-size

select { 
 
    -moz-appearance: none; 
 
    border: 1px solid #333; 
 
    color: #999; 
 
    display: inline-block; 
 
    font-size: 12px; 
 
    height: 39px; 
 
    padding: 0 15px; 
 
    vertical-align: top; 
 
} 
 
select option { 
 
    padding: 7px 15px; 
 
}

<select> 
 
<option selected="selected" value="">Please select one:</option> 
 
<option value="1">Prayer Requests</option> 
 
<option value="2">Financial Assistance</option> 
 
<option value="3">Life, Illness & Loss</option> 
 
<option value="4">Marriage, Relationship & Family</option> 
 
<option value="5">Life Controlling Issues & Addictions</option> 
 
<option value="6">Counseling & Life Improvement</option> 
 
<option value="7">Other</option> 
 
</select>

Answer 2

因为在你CSS你给select固定width改变你的风格，如下

select option { 
    padding: 7px 4px; 
}