Clever Geek Handbook

Removing a shim from the HTML selection menu

How do I remove the top / left padding in the select menu?

enter image description here

I tried setting padding and margin to 0, but it had no effect. Here is the 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/

+3


source to share


4 answers


The space you specify inside the image is not padding

the space occupied by the tag optgroup

inside the tag Select

. And it cannot be removed due to the browser restrictions of the tag Select

along with your approach HTML

. The indent left

should represent the structure of the grouping.

If you don't want this space, then don't use the tag optgroup

and instead go directly to option

as shown below in the Fiddle section. Check demo 1

Or, if you still want to keep the tag optgroup

, you can do a CSS hack to remove vertical-space

, but that won't help you remove the side space left

. Check Demo 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>
Run codeHide result


+4


source


In Chrome and Opera, the user agent stylesheet adds a :: before element to the element:

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

If you want to install a CSS fix, this should do it:

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

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

optgroup option::before {
  content: "";
}
      

        
        
        
      

    
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>
Run codeHide result


EDIT:



Interestingly, this space is added differently depending on the browser . This fix worked for me in Chrome and Opera, but in Firefox I had to add:

padding-left: 0px;

To the elements ...

FURTHER EDITION:

  • In IE , that seems to be the way to render the optgroup option; I couldn't find a solution.
  • In Edge, the entire menu was minimized to itself, so I didn't even try there.
  • Not sure what's going on in Safari as I don't have it on my machine.
+2


source


Two options:

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

Solution 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>
+1


source


What about:

<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 validation: HTML optgroup

0


source






More articles:


All Articles