用CSS实现--点击input输入框使得输入框和后面的button边框同时变色
实现效果:初始效果:鼠标放在输入框hover效果:鼠标放在button上效果:点击输入框锁定边框效果:HTML结构:<div class="btn"><input type="text" placeholder="输入关键字">//placeholder高版本浏览器可兼容<button class="iconfont"></butt
·
实现效果:
初始效果:
鼠标放在输入框hover效果:
鼠标放在button上效果:
点击输入框锁定边框效果:
GIF整体效果:
HTML结构:
<div class="btn">
<input type="text" placeholder="输入关键字">//placeholder高版本浏览器可兼容
<button class="iconfont"></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;
}
更多推荐
已为社区贡献1条内容
所有评论(0)