图1为文本框未被选中时的效果,图2为文本框被选中的效果,下面介绍方法(核心代码为第3步的script代码)
1.首先是文本框(html代码)
<div class="ct_right_header">
<div id="search" class="search">
<input id="search_1" class="search_1" οnfοcus="setfocus()" οnblur="losefocus()"
type="text" placeholder="搜索...">
</div>
<bottom class="search_button"><i class="fa fa-search"></i></bottom>
</div>
2.然后是文本框样式(css代码)
.ct_right_header{
box-sizing: border-box;
width: 360px;
height: 50px;
background-color: #25292f;
border-radius: 4px;
padding: 8px;
}
.search{
width: 292px;
height: 34px;
border-radius: 4px;
border: 1px solid #f89693;
box-shadow:inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(238,88,83,0.6) ;
background-color: transparent;
display: inline-block;
box-sizing: border-box;
/* padding: 2px; */
}
.search_1{
box-sizing: border-box;
border-radius: 4px;
width: 292px;
line-height: 20px;
font-size: 18px;
height: 32px;
background-color: transparent;
position: absolute;
border: 0;
color:#5e5656;
}
.search_button{
display: inline-block;
width: 37px;
height: 30px;
background-color: #d9534f;
border-color: #d43f3a;
position: relative;
text-align: center;
margin: 0 auto;
font-size: 12px;
top: -3px;
left: 5px;
border-radius: 4px;
cursor: pointer;
}
.search_button i{
color: #fafafa;
left: 13px;
padding-top: 10px;
width: 11px;
height: 12px;
display: inline-block;
}
3.这里用onfocus和onblur两个属性来实现点击获取焦点,点击其他地方失去焦点(核心代码)
<script>
function setfocus(){
document.getElementById("search").focus();
//鼠标点击时获得焦点
search.style.backgroundColor = "white";
//获取焦点时将背景颜色变为白色
}
function losefocus(){
document.getElementById("search").blur();
//失去焦点以后
search.style.backgroundColor = "#25292f";
//将背景色变回原样
}
</script>