<MetaCharSet= "Utf-8" /><styletype= "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><Divclass= "Search_box"> <form> <inputtype= "text"placeholder= "Search" > <Buttontype= "Submit" ><Button> </form></Div>
CSS implementation when you move the mouse to input, the input box appears shaded, and when you move to the button, the shadow of the input box disappears, and the button box appears shaded