Forums

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
    Posts
  • #245018
    jsgao0
    Participant

    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:
    http://codepen.io/jsgao0/pen/AXzPrX

    #245021
    giudev
    Participant

    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.

    #245031
    jsgao0
    Participant

    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.