1、先上效果图
<div class="topBar">SN号查询</div>
<form class="searchform">
<div>
<input type="text" id="searchText" onfocus="clearText()" placeholder="请输入SN号" />
</div>
<div>
<button class="btn btn-info" id="searchBtn" type="button" onclick="validityText()">查询</button>
</div>
</form>
2、顶部渐变色
.topBar {
height: 50px;
background: linear-gradient(#632E50, #381A42, #080333);
padding-left: 50px;
line-height: 40px;
color: #fff;
text-align: left;
font-size: 20px;
}
3、组合输入框和按钮
/*整个表单*/
.searchform {
text-align: center;
margin: 0 auto;
padding: 0;
padding-top: 10px;
display: inline-table;
width: 400px;
}
/*输入框*/
#searchText {
border: 1px solid #6c6c6c;
height: 35px;
width: 300px;
margin: 0;
padding-left: 10px;
border-radius: 5px 0 0 5px;
float: left;
border-right: 0px;
}
/*按钮*/
#searchBtn {
margin: 0;
padding: 0 20px;
height: 39px;
border-radius: 0 5px 5px 0;
border: 1px solid #6c6c6c;
float: left;
border-left: 0px;
background-color: #5bc0de;
color:#fff;
}
4、提示信息颜色
input::-webkit-input-placeholder {
color: #ccc;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #ccc;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #ccc;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #ccc;
}