How to hide the triangle on dropdown element?

Is there any way to hide/remove the triangle on the dropdown element?

1 Like

Yes I’ve done that before. You can find the answer on Stackoverflow. I’m on mobile so I can’t really look for it.

I think this did it for me, if you enter it into an html element on the page.

select { -webkit-appearance: none; }
1 Like

Is there a way to restrict it to a single element or group? I don’t want this page-wide.

put an id attribute (screenshot) on each dropdown you want affected, then in the html (css style), try this

#noarrowdropdown {
-webkit-appearance: none;

It’s not working. Can you tell what I am doing wrong?

I’d try using this CSS plugin instead of the HTML element. It may work a bit better, just an idea.

Did a test and got it working with the same code provided above using the CSS plugin.

  1. Drop a css element on the page
  2. Give the dropdown an attribute name
  3. Workflow: On page load > Add custom style to head csstools A (found in element actions) > enter css code snippet


hi robert,

i just learned that the ID attribute you assign to the dropdown doesn’t work with numbers and symbols.

it worked for me with letters. see screenshots and side by side another dropdown without the attribute on the same page.

make sure to put the css between < style > < / style >. or use a plugin but that’s not fun :slight_smile:02%20PM 52%20PM


Oh my. Thank you.

Why don’t you put the css on the main page html section. Adding a HTML element might cause responsiveness issues.

This topic was automatically closed after 70 days. New replies are no longer allowed.