从HTML选择菜单中删除填充

概述参见英文答案 > How to change the style of a Select box’ optgroup label                                    6个 如何在选择菜单中删除顶部/左侧填充？ 我尝试将填充和边距设置为0,但这没有任何效果.这是HTML： <form class="timePeriodMenu"> <div class="u 参见英文答案 > How to change the style of a Select box’ optgroup label                                    6个
如何在选择菜单中删除顶部/左侧填充？

我尝试将填充和边距设置为0,但这没有任何效果.这是HTML：

<form >    <div >        <select name="select-native-2" ID="select-native-2" multiple>            <optgroup>                <option value="1">last 30 days</option>                <option value="6" selected="selected">past 6 months</option>                <option value="12">past 12 months</option>                <option value="300">List all</option>            </optgroup>        </select>    </div></form>

Jsfiddle：https://jsfiddle.net/wccnuxgt/

解决方法 您在图像中引用的空间不是填充它是Select标记内的optgroup标记所占用的空间.由于SELECT标记的浏览器限制以及HTML方法,它无法删除.左边的缩进表示分组结构.

如果您不想要那个空间,那么请不要使用optgroup标签,而是直接选择如下面的小提琴所示的选项.
检查演示1

或者,如果您仍想保留该optgroup标记,则可以执行CSS Hack,删除垂直空间,但它不会帮助您删除左侧空间.
检查演示2

.demo-2 optgroup {  Font-size: 0;}.demo-2 option {  Font-size: 14px;}

DEMO 1 - Removing OPTGROUP tag<form >  <div >    <select name="select-native-2" ID="select-native-2" multiple>      <option value="1">last 30 days</option>      <option value="6" selected="selected">past 6 months</option>      <option value="12">past 12 months</option>      <option value="300">List all</option>    </select>  </div></form><hr> DEMO 2 - KeePing Optgroup,but removing vertical-space with CSS Hack.<form >  <div >    <select name="select-native-2" ID="select-native-2" multiple>      <optgroup label="German Cars">        <option value="1">last 30 days</option>        <option value="6" selected="selected">past 6 months</option>        <option value="12">past 12 months</option>        <option value="300">List all</option>      </optgroup>    </select>  </div></form>

总结

以上是内存溢出为你收集整理的从HTML选择菜单中删除填充全部内容，希望文章能够帮你解决从HTML选择菜单中删除填充所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。