Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

CSS select text input with value X?

1421202857
Ada L.
Marketplace Creator
Sheet Author
API Scripter
For a character sheet I'm making for a campaign I'm running, I have one tab where players can enter their skills, using repeating fields. For official skills, I would like to display a description of the skill in a side panel whenever that skill's field receives focus, similar to in this mock-up here: <a href="http://www.neonairgames.net/img/misc/charSheetSkil" rel="nofollow">http://www.neonairgames.net/img/misc/charSheetSkil</a>... In this example, I have the skill "Small Guns" focused, and to the right it displays a picture and description of the "Small Guns" skill. To accomplish this, I'm trying to select the container for the description (absolutely positioned to the right column) preceded by a focused text input whose value equals the name of a relevant skill. Of course, this doesn't work, since the html value attribute remains static... Is there some sort of CSS sorcery I can use to do something like this?
1421206039
Lithl
Pro
Sheet Author
API Scripter
input[value=foo] will match an input with the value "foo"... if that's what's been hardcoded into the HTML, not if that's what the user has changed the input to be. If you just want to show/hide something based on a field having focus, you should be able to do it similarly to checking or unchecking a checkbox, except instead of :checked, use :focus. Small Guns: &lt;input class="sheet-small-guns" type="number" name="attr_small-guns" /&gt; Large Guns: &lt;input class="sheet-large-guns" type="number" name="attr_large-guns" /&gt; &lt;div class="sheet-skill-desc sheet-small-guns"&gt; Yeehaa! I'm a cowboy! Bang bang bang! Shoot! Shoot! Shoot! Bullet, bullet, gun! &lt;/div&gt; &lt;div class="sheet-skill-desc sheet-large-guns"&gt; Who send all these babies to fight? Entire team is &lt;em&gt;babies!&lt;/em&gt; &lt;/div&gt; .sheet-skill-desc { display: none; } input.sheet-small-guns:focus ~ div.sheet-small-guns, input.sheet-large-guns:focus ~ div.sheet-large-guns { display: block; } That ought to work.
1421207501

Edited 1421207637
Ada L.
Marketplace Creator
Sheet Author
API Scripter
Yeah, this would work for skills that are hard-coded in. I'm trying to get this to work for repeating fieldsets though, where the skill names won't be static attributes of the html. I might need to use hard-coded skills if I can't get this to work that way though. I'd like to keep the repeating fields if possible since they take up less space.