html - focus on one element boxshadow on another -
i trying box shadow on element wrapped around input when input in focus. can't work. have structured 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 all suggestions. appreciate it!!!
although not using jquery, if use jquery may 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 may not possible until not using js.
Comments
Post a Comment