I basically want searchBarFirstDiv to form a shadow when searchBarInput is selected
I am using REACT.
Here's my HTML for reference:
<div className={css.searchBarFirstDiv}>
<label className={css.searchBarDivContent} for="location-search-input">
<div className={css.searchBarHeadingFont}>Location</div>
<input
id="location-search-input"
placeholder="Where are you going?"
className={css.searchBarInput}
/>
</label>
</div>How do I do this?
Pure CSS solution
#main {
padding: 30px;
margin: 31px;
}
#main:focus-within {
box-shadow: 0px 0px 10px red;
}<div id="main">
<input type="text" id="input" placeholder="focus me!">
</div>Vanilla JS approach:
document.getElementsByClassName('searchBarInput')[0]
.addEventListener('focus', function(){
triggerFocus(document.getElementsByClassName('searchBarFirstDiv')[0]);
});
// Thanks to: https://stackoverflow.com/a/52450494/1352994
function triggerFocus(element) {
var eventType = "onfocusin" in element ? "focusin" : "focus",
bubbles = "onfocusin" in element,
event;
if ("createEvent" in document) {
event = document.createEvent("Event");
event.initEvent(eventType, bubbles, true);
}
else if ("Event" in window) {
event = new Event(eventType, { bubbles: bubbles, cancelable: true });
}
element.focus();
element.dispatchEvent(event);
}