实现效果：

初始效果：

鼠标放在输入框hover效果：

鼠标放在button上效果：

点击输入框锁定边框效果：

GIF整体效果：

HTML结构：

<div class="btn">
	<input type="text" placeholder="输入关键字">//placeholder高版本浏览器可兼容
	<button class="iconfont">&#xe661;</button>//字体图标，搜索按钮的放大镜
</div>

CSS样式：

/*输入框基本样式*/
.btn input{
	box-sizing: border-box;/*怪异盒子*/
	font-size: 14px;
	width: 360px;
	height: 40px;
	border: 1px solid #ccc;
	border-right: 0;/*和右边的button边框搭配*/
}
/*兄弟选择器，当获取了input的焦点时，选出input的兄弟button（两者同属一个父级.btn），设置边框颜色*/
.btn input:focus + button{/*核心1*/
	border: 1px solid #00a4ff;
}
/*获取input焦点*/
.btn input:focus{/*核心2*/
	border: 1px solid #00a4ff;
	border-right: 0;/*和失去焦点input样式保持一致*/
}
/*button基础样式*/
.btn button{
	width: 50px;
	height: 40px;
	background-color: #efefef;
	color: #000;
	border: 1px solid #ccc;/*解决input与button中间边框两倍宽度问题*/
	font-size: 20px;
}
/*鼠标放在按钮上更改样式*/
.btn button:hover{
	background-color: #00a4ff;
	color: #fff;
}
/*鼠标放在盒子之后更改输入框样式*/
.btn:hover input{
	border: 1px solid #00a4ff;
	border-right: 0;
}
/*鼠标放在盒子之后更改按钮样式*/
.btn:hover button{
	border: 1px solid #00a4ff;
}