0 Favourites

How do I style dropdown and textbox arrows?

  • I use a bunch of dropdown lists and textboxes that I styled with CSS. However, I don't know if I can also style the arrows (or simply make them invisible)

    Chrome (top) has the best results, the arrow from the dropdown is barely visible

    Internet Explorer (middle) surprisingly has a better result than Firefox on the textbox (did I really just say that?)

    Firefox (bottom) looks also good on the dropdown but displays the arrows on the textbox (set to number and disabled). Chrome only does this when hovering over an enabled textbox, and it also does not look this bad.

    Thanks in advance.

  • Found this link although I'm not sure it will work..

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • This might work, I´ll try it out when I get home.

    Thanks!

    Update: The following codes work for Chrome and Firefox but I didn´t find something that works for Internet Explorer.

    To disable the arrows on the dropdown lists:

    Set CSS style > "-moz-appearance" to "none"
    Set CSS style > "text-indent" to "0.01px"
    Set CSS style > "text-overflow" to ""
    Set CSS style > "-webkit-appearance" to "none"
    [/code:26pg7q20]
    
    To disable the arrows on the textboxes:
    [code:26pg7q20]
    Set CSS style > "-moz-appearance" to "textfield"
    [/code:26pg7q20]
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)