Can't get hover pseudoclass to work in repeating fieldset text inputs

Hello all.  I'm back with another noobish HTML/CSS question. I borrowed a character sheet template (which I can't find the original anymore) that was listed on roll20's help section.  It uses a fieldset tag that lets the user add as many text input fields as they want in a particular section.  My issue is, I am using this to record a character's abilities, and the field is too small to fit all the text. I would like to use the hover pseudoclass so that when you hover over one of the input fields, its height increases (or some other effect) so you can view all the text.  I am barely literate in HTML/CSS, but I got the syntax to work on other fields in my sheet, just not with this particular section. Here is the HTML in question: <section class="feat f-col"> <h2>Feats</h2> <fieldset class="repeating_feat"> <input name="attr_feat" type="text" > </fieldset> </section> <section class="trait f-col"> <h2>Traits</h2> <fieldset class="repeating_trait"> <input name="attr_trait" type="text" > </fieldset> </section> Here is the CSS in question: .feat { grid-area: feat; background-color: #E3D9CA; } .feat .repcontainer[data-groupname="repeating_feat"]{ padding-bottom: 0.2em; } .feat .repcontainer[data-groupname="repeating_feat"] .repitem{ margin: 4px 0px; } .trait { grid-area: trait; background-color: #E3D9CA; } .trait .repcontainer[data-groupname="repeating_trait"]{ padding-bottom: 0.2em; } .trait .repcontainer[data-groupname="repeating_trait"] .repitem{ margin: 4px 0px; } The line I was adding to the CSS was: .feat .repcontainer[data-groupname="repeating_feat"] .repitem:hover {     height: 200%; } I tried a few variations of that, calling only the repitem, or giving the specific input in the HTML a class and only calling that, but nothing has worked.  Any advice would be appreciated! Thank you, -Wes

Hi Wes, .feat .repcontainer[data-groupname="repeating_feat"] .repitem:hover {     height: 200%; } That selector looks like it should work.  Have you tried a fixed height instead of a percentage? ie height: 3em;

This is likely because you are targeting an input. Input height can be wonky. Also, height on an input won't do what you want because inputs are always only a single line.

Yeah, I would put that input inside a div, and target the div:hover I often puit divs inside a fieldset because I find them easier to manipulate than the repitem, though this is purely an aesthetic choice and often isnt necessary.

Scott C. said: This is likely because you are targeting an input. Input height can be wonky. Also, height on an input won't do what you want because inputs are always only a single line. If I change the code to have it be textarea rather than input, I assume I'll lose all the data already in the existing input fields on my sheets, right?

No, the data will persist. Textareas are really just multi line inputs.

Great, changing it to textareas solved everything as the hovering works, the text is more legible and the box scrollable/resizable, and my data wasn't lost. Thanks all!

It might be best to think of inputs and textareas as simply windows on the underlying data. The actual data is accessed with the name="attr_something" part and is separate from the html elements which are just ways to present that data.

Heh, I'd been trying to think of how to describe that relationship. Nice analogy Gigs.