The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Style dropdown on datalist element

  • This topic is empty.
Viewing 4 posts - 16 through 19 (of 19 total)
  • Author
  • #248763

    Unfortunately a background-image would still allow the default arrow to be visible over the top.

    I still think a pseudo element is the way to go – something like this
    The default arrow is still there, its just obscured by the faux arrow, and pointer-events allow the click/tap to pass through.

    Note that the faux arrow will be visible in those browsers that don’t support datalist so you’d need to compensate for that.

    worked like a charm! thanks a lot!


    No problem. Happy to help :)


    How can i change datalist background color?


    As far as I’m aware, you can’t easily style datalists with CSS – they adopt the browser style. I can’t test anything at the mo though as I’m on iOS and datalists aren’t supported there. You can try at your side though and see what happens – the usual way – something like; datalist { background:red }

Viewing 4 posts - 16 through 19 (of 19 total)
  • The forum ‘CSS’ is closed to new topics and replies.