How do I shadow a div if it's child element is focused?

Question

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?

do you want focus or just shadow ? – Dostonbek Oripjonov Oct 07 '21 at 06:57 — Dostonbek Oripjonov, Oct 07 '21 at 06:57

score 4 · Accepted Answer · answered Oct 07 '21 at 06:55

4

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>

answered Oct 07 '21 at 06:55

Posandu

525
6
18

1

great! just for info: doesn't work on IE11 https://caniuse.com/?search=%3Afocus-within – thchp Oct 07 '21 at 07:10
I don't think people use IE these days. But thanks for the info :D – Posandu Oct 07 '21 at 07:12

score 0 · Answer 2 · answered Oct 07 '21 at 06:54

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);
}

How do I shadow a div if it's child element is focused?

2 Answers2