<!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>消息</title>
</head>
<link rel="stylesheet" href="css/body.css">
<link href="js/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<style>
#search {
width: 100%;
height: 50px;
background-color: rgb(248, 248, 248);
padding-top: 1px;
}
#search input {
width: 78%;
height: 35px;
background-color: rgb(255, 255, 255);
border-bottom-left-radius: 50px;
border-top-left-radius: 50px;
margin-top: 5px;
margin-left: 2%;
font-size: 16px;
padding-left: 15px;
border: 0px;
color: black;
outline: none;
padding-left: 15px;
}
/* 默认信息placeholder的颜色和字体 */
::-webkit-input-placeholder {
color: rgb(197, 197, 197);
font-size: 15px;
}
#search button {
width: 14%;
height: 37px;
background-color: rgb(240, 238, 238);
/* background-color: rgb(3, 20, 152); */
border: 0px;
margin-left: -5px;
border-bottom-right-radius: 50px;
border-top-right-radius: 50px;
color: rgb(116, 116, 116);
font-size: 20px;
position: relative;
top: 1px;
}
</style>
<body>
<div id="search">
<input type="text" required="required" placeholder=" 请输入搜索信息" name="u"
onfocus="if(placeholder==' 请输入搜索信息'){placeholder=''}" onblur="if(placeholder==''){placeholder=' 请输入搜索信息'}"
v-model:value="UserName"></input>
<button>
<i class="fa fa-search"></i>
</button>
</div>
</body>
</html>