Forums

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

Home Forums CSS [Solved] Input/Output Styling

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #161218
    Cyanoxide
    Participant

    Just a quick question, I’m pretty sure it’s not possible because I’ve been searching online and can’t seem to find anything on this. I don’t know if I’m just searching for the wrong term or if there isn’t any functionality for this but I wanted to get some confirmation on the matter.

    I’m using a form input (the range bar to be precise) and I’m also using the output tag to display the data in the form of a tooltip with a bit of Javascript hocus pocus. Is there a way for me to say specifically in the CSS something along the lines of this:

    input[type="range"]:hover output{ display:visible;}

    So that the tool tip is only displayed when the range bar is highlighted. Similarly to how you’d hide sub-menus when that section of the menu isn’t selected.

    #161222
    Paulie_D
    Moderator

    We’d have to see the HTML/CSS but, AFAIK, the output element is not part or child of the input element so your CSS would seem to be incorrect.

    I suspect that this

    input[type="range"]:hover ~ output{ display:visible;}
    

    …might be more appropriate.

    http://html5doctor.com/the-output-element/

    The article specifically mentions the range/output combination.

    #161223
    Cyanoxide
    Participant

    That worked perfectly, you sir are a god among men, thank you very much!

    #161227
    Paulie_D
    Moderator

    you sir are a god among men, thank you very much!

    I keep telling them that but no statues or temples ever appear. It’s getting disheartening TBH.

    :) :)

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