布局思路：左边的按钮采用的是绝对定位，中间文本框采用的是flex布局，给它设置flex:1就可以了，然后外面的大盒子用的CSS3盒子模型，这样给边框的时候就不会影响盒子的大小。
功能介绍：当文本框获得焦点的时候，判断里面的文字是不是“手机”，如果是手机则清除文本框中内容，如果是用户输入的其他内容则不清除，同时需要改变里面的文字为更深的颜色；当文本框失去焦点的时候，如果用户没有输入内容则将内容还原为“手机”，同时需要改变里面的文字颜色为起始颜色。
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
box-sizing: border-box;
display: flex;
position: relative;
width: 400px;
height: 40px;
margin: 100px auto;
border: 2px solid #5187ef;
}
.box input[type=button] {
width: 100px;
height: 100%;
border: 0;
position: absolute;
top: 0;
right: 0;
background-color: #5187ef;
color: #fff;
font-size: 16px;
}
.box input[type=text] {
flex: 1;
outline: none;
color: #ccc;
font-size: 14px;
border: 0;
text-indent: .5em;
}
</style>
</head>
<body>
<div class="box">
<input type="text" value="手机" id="inputs">
<input type="button" value="搜索">
</div>
<script>
var inputs = document.getElementById('inputs');
//获得焦点
inputs.onfocus = function() {
// 判断用户是否输入了内容，如果输入了内容就不删除
if (inputs.value === "手机") {
inputs.value = "";
}
// 改变文字颜色
inputs.style.color = "#1e1e1e";
}
// 失去焦点
inputs.onblur = function() {
// 判断用户是否输入了内容，没有输入就还原成手机
if (inputs.value === "") {
inputs.value = "手机"
}
// 失去焦点后把文字颜色还原
inputs.style.color = "#ccc";
}
</script>
</body>
</html>效果展示：
获得焦点
输入内容：
失去焦点：
