Box around multiple unique div elements - html

Question

Question: Is it possible to draw a CSS box around multiple div elements with unique classes, and with no ability to add parent div tags into the HTML?
I'm trying to group multiple div classes together as part of a larger form. The HTML in the form itself cannot be modified to add additional parent div layers. The CSS and JavaScript are editable
Example: We have a large request form that has 50 questions, with 10 questions in each section of the form. We can draw boxes around those individual questions, but also want to draw a box around a section of questions.
Each div has its own unique class. This is something we cannot change, as it's supplied by the tool we use.
Here's an example of our HTML and CSS:
.form-field {
background-color: #eee;
padding: 15px;
/* border: 1px solid black; */
border-radius: 5px;
box-shadow: 4px 4px grey;
}
.form-field:valid {
background-color: #000;
padding: 15px;
/* border: 1px solid black; */
border-radius: 5px;
box-shadow: 4px 4px grey;
}
.form-field.select.optional.request_ticket_form_id {
background-color: #d9ead3;
padding: 15px;
/* border: 1px solid black; */
border-radius: 5px;
box-shadow: 4px 4px grey;
}
.form-field:hover {
background-color: #ccc;
}
<div class="form-field text optional request_custom_fields_12345">
<label id="request_custom_fields_12345_label" for="request_custom_fields_12345">Vest Size<span class="optional">(optional)</span></label>
<textarea name="request[custom_fields][12345]" id="request_custom_fields_12345" aria-required="false" aria-labelledby="request_custom_fields_12345_label"></textarea>
</div>
<br>
<div class="form-field text optional request_custom_fields_67890">
<label id="request_custom_fields_67890_label" for="request_custom_fields_67890">Vest Shape<span class="optional">(optional)</span></label>
<textarea name="request[custom_fields][67890]" id="request_custom_fields_67890" aria-required="false" aria-labelledby="request_custom_fields_67890_label"></textarea>
</div>
<br>
<div class="form-field text optional request_custom_fields_98765">
<label id="request_custom_fields_98765_label" for="request_custom_fields_98765">Vest Color<span class="optional">(optional)</span></label>
<textarea name="request[custom_fields][98765]" id="request_custom_fields_98765" aria-required="false" aria-labelledby="request_custom_fields_98765_label"></textarea>
</div>
<br>
<div class="form-field text optional request_custom_fields_23456">
<label id="request_custom_fields_98765_label" for="request_custom_fields_23456">Vest Color<span class="optional">(optional)</span></label>
<textarea name="request[custom_fields][23456]" id="request_custom_fields_23456" aria-required="false" aria-labelledby="request_custom_fields_23456_label"></textarea>
</div>
The part that does not seem to work for us is trying to say "draw box around 67890 to 23456" (and anything in between).

Answer 1

Yes. There is a possibility
if the sole purpose is to highlight, or add a "visual shape" on-screen without altering the DOM.
Create a <div> element which has CSS position fixed.
Add pointer-events: none; to that DIV in order to use it exclusively as a "drawing layer" on-top of your app but allow pointer events to propagate trough it.
Get all your elements on the page From-element and to-element. Get their coordinates using getBoundingClientRect. BCR is relative to the viewport, which is perfect to use on a position fixed element overlay.
Once you have the "min-max" coordinates (calculate to min top-left value and the max bottom-right value) having those two points you can now freely draw a rectangle on your canvas. Coincidentally it will be drawn exactly around all the desired elements.
Make sure to "redraw/reposition" the DIV on page resize, scroll, load, DOM ready - or on some button click - if needed.
Create a JavaScript function to be used like:
highlightBox(Elements_to_consider, start_index, end_index)
// DOM utility functions:
const ELS = (sel, par) => (par || document).querySelectorAll(sel);
const EL = (sel, par) => (par || document).querySelector(sel);
// Task:
const EL_highlightBox = EL("#highlightBox");
const highlightBox = (ELS_items, fr, to) => {
const BCR_fr = ELS_items[fr].getBoundingClientRect();
const BCR_to = ELS_items[to].getBoundingClientRect();
EL_highlightBox.style.cssText = `
top: ${BCR_fr.top}px;
left: ${BCR_fr.left}px;
height: ${BCR_to.top - BCR_fr.top + BCR_to.height}px;
width: ${BCR_to.left - BCR_fr.left + BCR_to.width}px;
`;
};
const drawHighlightBox = () => highlightBox(ELS(".item"), 2, 4);
addEventListener("resize", drawHighlightBox);
addEventListener("scroll", drawHighlightBox);
drawHighlightBox();
#highlightBox {
/* Important styles: */
position: fixed;
z-index: 1000;
pointer-events: none;
/* Other styles: */
background: hsla(100, 60%, 50%, 0.2);
outline: 4px solid hsla(100, 60%, 50%, 1);
}
.item {
margin: 10px 0;
padding: 60px;
border: 1px solid gray;
}
<div id="highlightBox"></div>
<div class="item">Item 0 (scroll down)</div>
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
<div class="item">Item 10</div>