focus on one element boxshadow on another

Question

I am trying to get a box shadow on an element wrapped around an input when an input is in focus. but can't get it to work. I have probably structured the code wrong. Snippet bellow

.cam-peoplepicker-userlookup {
  margin-right: 55em;
  height: 7em;
  min-width: 50%;
  overflow: hidden;
  border: 1px solid #99b0c1;
  padding: 2px 5px 2px 5px;
  background-color: white;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
}

#k:focus #divAdministrators {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

@*Project Manager*@
<div class="form-group">
  <div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
    <span id="spanAdministrators"></span>
    <textarea id="k"></textarea>
  </div>
  <div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>

</div>
</div>

Thank you all for all the suggestions. really appreciate it!!!

Possible duplicate of [Is there a CSS parent selector?](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — CBroe, Jul 26 '17 at 09:02
You rather want https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within (and a polyfill for IE/Edge maybe.) — CBroe, Jul 26 '17 at 09:04
You cannot achieve what you want with your current HTML structure. — sol, Jul 26 '17 at 09:04
solved it like this. `$("#focucSelect").focus(function() { $("#divAdministrators").addClass("focus"); });` Not so pretty, but it works. any ide how to remove the class when I click out side the box? — AllramEst, Jul 26 '17 at 09:20

score 2 · Accepted Answer · answered Jul 26 '17 at 09:14

Although you are not using jQuery, but if you would like to use jQuery it may be helpful...

$(document).ready(function() {
    $('#k').focus(function(event) {
        $('#divAdministrators').addClass('focused')
    });
    $('#k').blur(function(event) {
        $('#divAdministrators').removeClass('focused')
    });
});

.cam-peoplepicker-userlookup { margin-right: 55em; height: 7em; min-width: 50%; overflow: hidden; border: 1px solid #99b0c1; padding: 2px 5px 2px 5px; background-color: white; -moz-border-radius: 0.5em; -webkit-border-radius: 0.5em; border-radius: 0.5em; }
.focused { border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
 <div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
  <span id="spanAdministrators"></span>
  <textarea id="k"></textarea>
 </div>
 <div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>

I think it may not be possible until you are not using js.

I acctually made a jquery solution just before you posted yours. but didnt have the `blu()` to deselect. so thanx!!! — AllramEst, Jul 26 '17 at 09:28

score 2 · Answer 2 · answered Jul 26 '17 at 09:20

You would have to re-structure your HTML to achieve this without Javascript.

.cam-peoplepicker-userlookup {
  margin-right: 55em;
  height: 7em;
  min-width: 50%;
  overflow: hidden;
  border: 1px solid #99b0c1;
  padding: 2px 5px 2px 5px;
  background-color: white;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
}

.form-group {
  position: relative;
}

#k {
  position: absolute;
  top: .5em;
  left: .5em;
}

#divAdministrators {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

#k:focus~#divAdministrators {
  border-color: #66afe9;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}

@*Project Manager*@
<div class="form-group">
  <textarea id="k"></textarea>
  <div id="divAdministrators" class="cam-peoplepicker-userlookup ms-fullWidth">
    <span id="spanAdministrators"></span>
  </div>
  <div id="divAdministratorsSearch" class="cam-peoplepicker-usersearch ms-emphasisBorder"></div>
</div>

This looks really great, but i canr restructre the code. I can only manipulate the code. The structure is there becasue of how a people picker is built in ASP.NET. Thnak you thou for the example! — AllramEst, Jul 26 '17 at 09:23

focus on one element boxshadow on another

2 Answers2