实现效果:

初始效果:

初始效果

鼠标放在输入框hover效果:

鼠标放在输入框hover效果

鼠标放在button上效果:

鼠标放在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;
}
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐