codemonkey codemonkey - 2 months ago 14
CSS Question

Adding padding to drop down select active item

I'm trying to drop down items that are active, however it doesn't seem to be possible. They want me to move

enter image description here
to this:

enter image description here

so that there is some extra padding on the left. However I canno't seem to target the active state.

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>



  • I found that removiing the -webkit-appearance: none makes it space properly but it also removes the bottom border


Answer

Use padding, like this

.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>