How do I style dropdown and textbox arrows?

0 favourites
  • 3 posts
From the Asset Store
Project File of my C3 Tutorial Customized DropDown List
  • 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.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Found this link although I'm not sure it will work..

    https://teamtreehouse.com/community/fir ... -overrides

  • 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)