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

Home Forums CSS CSS Only Custom Select

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #245018

    Why I did this is that I want to build custom component using HTML and CSS as less JavaScript as possible.

    I was considering on radio of input and label elements which are for data and custom layout. label element also fires click method on the associated element with for attribute.

    Ok. That works fine. But the list could not be closed simultaneously when someone click an option in the list. So I add close function in onclick attribute of each option.

    My question is: Is there a way does closing list without JavaScript?

    The following link is the demo on Codepen:


    I don’t think there is a way, but want to follow the topic to see if someone finds a solution.

    I tried to create a position absolute label (for=selector-1) over your option list hoping in a “click propagation” behaviour, but it looks like the event propagation is only for JS purposes.


    Someone suggested me to use :target CSS selector with href of a element, e.g. modal. Although I can’t find the way, it might be a possible solution.

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