Básicamente, quiero que searchBarFirstDiv forme una sombra cuando se selecciona searchBarInput
Estoy usando REACT.
Aquí está mi HTML para referencia:
<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>¿Cómo hago esto?
Solución CSS pura
#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>Enfoque de vainilla JS:
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); }