专注于另一个元素boxshadow

Question

当输入处于焦点时，我试图在输入周围的元素上获得一个框阴影。但是无法让它发挥作用。我可能构造错误的代码。 Snippet bellow

＆＃13;

＆＃13;

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

＆＃13;

@*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>

＆＃13;

＆＃13;

＆＃13;

  

谢谢大家提出的所有建议。非常感谢!!!

Answer 1

虽然你没有使用jQuery，但是如果你想使用jQuery它可能会有帮助......

$(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>

我认为在你不使用js之前可能无法实现。

Answer 2

您必须重新构建HTML才能在没有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>