Reset/Override User Agent Stylesheet for <option> HTML element

Store Design
1

hello,

i tried resetting option with the following code but it does not work. There’s a box shadow under

option{

all:unset;

}

I found this article in mdn mozilla documents here

Styling with CSS

Styling the element is highly limited. Options don’t inherit the font set on the parent. In Firefox, only color and background-color can be set however in Chrome or Safari it’s not possible to set any properties. You can find more details about styling in our guide to advanced form styling.

If that’s true, then that’s ugly because the dropdown option group have no padding, have an ugly box shadow with perhaps 5px blur and 2px spread and no curved borders. The only attributes i was able to change were the font color and background color. however, these are simply not enough for my styling requirements.

2

Hello @blablabla123 :waving_hand:

I understand your issue. As web developers, we were facing this issue many times. Usually, we need to create custom select element with HTML, CSS, Js, an example here https://codepen.io/wallaceerick/pen/nJLPvN

That being said, you should not try styling the option element with CSS, if you need full control over it, you can hire a developer to replace it with a custom select element.

3

Hello @ZenoPageBuilder ,

I don’t want to hire a developer to style for me a very basic thing. I tried the following but this still does not work.

option[value=price-ascending],
option[value=price-descending],
option[value=created-ascending],
option[value=created-descending] {
  padding:20px !important;
}

The question is how do I insert a custom ID for the element? The

4

Hi @blablabla123 :waving_hand:

I know it is a very basic styling. But unfortunately the option elements do not accept CSS styling. I found this answer online. We need to rebuild a custom select element if we need to style the options.

Screen Shot 2022-10-14 at 10.39.11.png
Screen Shot 2022-10-14 at 10.39.11.png739×187 21.9 KB

5

So what’s the solution here if that doesn’t work? Will it be possible to alter the default filtering options of Shopify or should I simply accept the fact that there’s nothing that can be done about it? We have no access to this type of HTML because it’s on Shopify’s backend only which makes things worse. I guess I’ll have to live out with it.