首页 > 代码库 > 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框出现阴影
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。