[Solved] Input/Output Styling

[Cyanoxide]

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.

[Paulie_D]

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.

[Cyanoxide]

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

[Paulie_D]

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.

:) :)

[Author]

Posts