I'm working on an application that will return some of its results as a massive HTML table. To keep the rows and columns from being resized by text hundreds of cells away, any cell content that's more than a certain length is hidden until clicked, by being wrapped in this HTML:
<label class="showlong">Show long text? <input type="checkbox" /></label>
<span class="hidden">{text}</span>
With corresponding CSS:
.hidden {
display: block;
height: 0;
width: 0;
overflow: hidden;
}
label.showlong:has(input:checked) ~ .hidden {
display: inline;
}
Setting the height and width to 0 and hiding the overflow means that this content can still be found with ctrl-F, while not actually appearing until the user clicks the checkbox.
Overall, this works all right. But when the user searches for some text that's hidden, I'd like to highlight the cell in question, so that they know what exactly they should click.
The :focus-within selector seems ideal for this, but it doesn't recognize the "focus" placed on text during a search. Is there any way of detecting this other "focus" in CSS or JavaScript?
