一、默认显示信息
<input type="text" required="required" placeholder=" 请输入金额" name="u"onfocus="if(placeholder==' 请输入金额'){placeholder=''}"onblur="if(placeholder==''){placeholder=' 请输入金额'}"v-model:value="UserName"></input>
默认信息CSS样式
/* 默认信息placeholder的颜色和字体 */::-webkit-input-placeholder {color: rgb(197, 197, 197);font-size: 15px;}
二、文本框样式
outline: none; // 获得焦点不显示边框颜色
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; }
三、搜索框实例
<!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>
