选择“相同宽度”选项
Select option same width
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;
}
为什么选项字段比选择字段宽?如何将其调整为具有相同文本填充的select和option的相同宽度?
隐藏文本id溢出的原因是,在CSS
中,您给select
一个固定的width
。如果删除宽度,它将扩展到显示所有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>
将您的风格更改为以下
select option {
padding: 7px 4px;
}
相关文章:
- 一次又一次地在新的和相同的选项卡中打开一个url
- 在和父项相同的选项卡中打开窗口,使用来自父项的变量
- chrome扩展弹出相同的选项卡仍然不起作用
- 选择“相同宽度”选项
- 为什么Safari中相同宽度的“选择和输入”标签在渲染时差异巨大
- 打开jQuery对话框,并选择相同的选项
- 将相同的选项一次又一次地传递给jQuery函数
- 在选择列表中选择相同的选项
- 如何从相同ng选项的其他用途中删除选定的ng选项
- 如何添加多个具有相同ng选项集的select元素
- 多个传单地图在同一页与相同的选项
- 选项:第一个孩子不会在所有情况下选择相同的选项
- 如何有效地将相同的选项值分配给Meteor中的多个Select元素?
- 即使重新选择了相同的选项,也要为select运行更改事件
- 当用户选择相同的<选项>在动态创建的<选择>
- getElementByName vs getElementbyID或相同选择选项中相同元素的两个值
- 当单击按钮时,我如何打开相同的选项卡
- 引导程序不会在相同的选项卡之间重复来回切换
- 避免使用jquery多次选择相同的选项,第一个select标记除外
- 如何添加相同宽度的点(..)