首页 > 代码库 > css实现 当鼠标移到input的时候,input框出现阴影,当移动到button的时候,input框的阴影消失,button框出现阴影

css实现 当鼠标移到input的时候,input框出现阴影,当移动到button的时候,input框的阴影消失,button框出现阴影

<meta charset="utf-8" /><style type="text/css">div{overflow: hidden;}div.search_box input{    float:left;    width:200px;    height:50px;    box-sizing:border-box;    padding:0 40px 0 10px;    line-height:50px;    border:0;    border-left:1px solid #ddd;    outline:none;}.search_box>form>button{    float:right;    width:40px;    height:50px;    border:0;    border-right:1px solid #ddd;    background:url(search1x.png) no-repeat center;    position:absolute;    left:160px;} div.search_box input:hover{    box-shadow: inset 0 -2px 2px #3b6caa,inset 2px 0 2px #3b6caa,inset -2px 0 2px #3b6caa;}div.search_box button:hover{    box-shadow:inset 0 -2px 2px #3b6caa, inset 2px 0 2px #3b6caa, inset -2px 0 2px #3b6caa;    cursor:pointer;}</style><div class="search_box">     <form>          <input type="text" placeholder="Search" >          <button type="submit" ><button>     </form></div>

 

css实现 当鼠标移到input的时候,input框出现阴影,当移动到button的时候,input框的阴影消失,button框出现阴影