Select option padding not working in chrome

html

css-trickery

responsive-design

web-development

byAnton Shumikhin·Dec 2, 2024

When padding falls flat in <option> elements in Chrome, jQuery select2 plugin comes to the rescue. It offers a dropdown with styles that bypass browser limitations:

<select class="select2-style">
    <option value="1">Stylish Option 1</option>
    <option value="2">Stylish Option 2</option>
</select>

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<script>
    $(document).ready(function() {
        // Apply the magic
        $('.select2-style').select2(); 
    });
</script>

Style .select2-style class in CSS with desired padding, and Chrome will display your chic dropdown.

When browsers play tough

Chrome, in particular, has a different manifesto to follow - it uses its own styles (a.k.a user agent stylesheet) over custom ones, curtailing customization of elements like option.

Even with notorious -webkit-appearance: none;, -moz-appearance: none;, or appearance: none; CSS trickery, the browser stands its ground, resisting padding on <option> elements.

Styling options for select elements

Chrome allows you to go wild with the styles of the dropdown arrow - just use -webkit-appearance: none; on <select> and put on your creativity hat:

.select-style {
    -webkit-appearance: none;
    /* Add your styling here. Sky's the limit! */
}
.select-style + .custom-arrow {
    /* Go all Picasso on the arrow here */
}

The sneaky indent padding trick

Don't present. Pretend. Apply text-indent: 5px; on <select> for a faux padding effect:

.select-style {
    text-indent: 5px;
    /* Other styles to make it look fabulous */
}

Swapping `<select>` and `<option>` with `ul` and `li`

To obtain a uniform look across browsers, swap <select> and <option> with ul and li. Then put JavaScript to work for managing the selection states.

The font size twist

Give some space to <option> elements by tweaking the font-size. It simulates padding and leaves more room for interaction:

.option-style {
    font-size: 1.2em; /* Giant readable text. A treat to sore eyes */
}

Crafting pseudo-padding with height

Manipulating the height of <select> with calc offers the illusion of vertical padding:

.select-style {
    height: calc(2em + 10px); /* Sneak in a 10px pseudo-padding. Don't tell Chrome! */
}

Handling the quirks

Playing with font size

font-size-adjust: 0.3 combined with font-size: 2em keeps the visual size of <option> elements stable, ensuring cross-browser consistency.

Embracing Webkit limitations

Understand that Chrome and other Webkit browsers pose styling constraints on <option> tags. Primarily, you only get a free hand with font styles. Patience is key!

explain-codes / Html / Select option padding not working in chrome

Linked

Remove Select arrow on IE



How to remove the default arrow icon from a dropdown list (select element)?



Ellipsis for overflow text in dropdown boxes



Change Select List Option background color on hover



Css :selected pseudo class similar to :checked, but for `` elements

