Question

如何在选择菜单中删除顶部/左侧填充？

我尝试将填充和边距设置为0，但这没有效果。这是HTML：

<form class="timePeriodMenu">
    <div class="ui-field-contain">
        <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/

Answer 1

您在图片中引用的空间不是padding，而是optgroup标记内Select标记所占用的空间。由于SELECT标记的浏览器限制以及HTML方法，因此无法将其删除。 left上的缩进代表分组结构。

如果您不想要该空格，请不要使用optgroup标记，而是直接转到option，如下方小提琴所示。 检查演示1

或者，如果您仍想保留optgroup标记，则可以执行CSS hack，删除vertical-space，但它无法帮助您删除left边空格。 检查演示2

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

DEMO 1 - Removing OPTGROUP tag

<form class="timePeriodMenu demo-1">
  <div class="ui-field-contain">
    <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 class="timePeriodMenu demo-2">
  <div class="ui-field-contain">
    <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>

Answer 2

在 Chrome 和 Opera 中，用户代理样式表将一个:: before元素添加到选择中：

select:-internal-list-box optgroup option::before {
    content: "    ";
}

如果你想要一个CSS修复，应该这样做：

＆＃13;

.demo-2 optgroup {
  font-size: 0;
}

.demo-2 option {
  font-size: 14px;
}

optgroup option::before {
  content: "";
}

＆＃13;

DEMO 1 - Removing OPTGROUP tag

<form class="timePeriodMenu demo-1">
  <div class="ui-field-contain">
    <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 class="timePeriodMenu demo-2">
  <div class="ui-field-contain">
    <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>

＆＃13;

编辑：

有趣的是根据浏览器的不同添加此空间。这个修复在Chrome和Opera中适用于我，但在 Firefox 中我必须添加：

padding-left: 0px;

到选项元素。

进一步编辑：

在 IE 中，它似乎只是一个optgroup选项的呈现方式我找不到解决方案。
在 Edge 中，整个菜单自动折叠，所以我甚至都没试过那里。
不确定 Safari 中的情况是什么，因为我的机器上没有。

Answer 3

两个选项：

Remove the optgroup element
Actually use the optgroup label attribute

解决方案1：

<form class="timePeriodMenu">
    <div class="ui-field-contain">
        <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>

解决方案2：

<form class="timePeriodMenu">
    <div class="ui-field-contain">
        <select name="select-native-2" id="select-native-2" multiple>
            <optgroup label="here is your label">
                <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>

Answer 4

怎么样：

<form class="timePeriodMenu">
  <div class="ui-field-contain">
    <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>

Alos check：HTML optgroup Tag

从HTML选择菜单中删除填充

4 个答案: