添加填充以下拉选择活动项目答案

【问题标题】：Adding padding to drop down select active item添加填充以下拉选择活动项目
【发布时间】：2017-01-31 11:24:24
【问题描述】：

我正在尝试下拉活动的项目，但这似乎是不可能的。他们要我搬家

对此：

所以左边有一些额外的填充。但是我似乎无法针对活动状态。

html:

  <select class="input-select  gender-dropdown"     id="dwfrm_profile_customer_customergender"     name="dwfrm_profile_customer_customergender" style="-webkit-appearance: none;">
   <option class="select-option" label="Male" value="1">Male</option>
   <option class="select-option" label="Female" value="2">Female</option>
    </select>

我发现删除 -webkit-appearance: none 可以使其空间正常，但它也删除了底部边框

【问题讨论】：

请分享您的代码

标签： html css drop-down-menu

【解决方案1】：

使用padding，像这样

.input-select {
  padding: 6px 24px 6px 12px;
  font-size: 16px;
}

<select class="input-select gender-dropdown" id="dwfrm_profile_customer_customergender" name="dwfrm_profile_customer_customergender" style="-webkit-appearance: none;">
  <option class="select-option" label="Male" value="1"> Male</option>
  <option class="select-option" label="Female" value="2"> Female</option>
</select>

【讨论】：