<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input</title>
<style type="text/css">
ul {width: 260px; margin: 10px auto;list-style: none;}
ul li {width: 260px;height: 60px;line-height: 60px;}
input {
border: 1px solid #ccc;
border-radius: 2px;
color: #000;
font-family: 'Opan Sans',sans-serif;
font-size: 1em;
height: 50px;
padding: 0 16px;
transition: background 0.3s ease-in-out;
width: 100%;
}
input:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 10px #9ecaed;
}
.button {
height: 50px;
width: 292px;
background: #009dff;
border: none;
border-radius: 2px;
color: #fff;
cursor: pointer;
font-family: 'Open Sans', sans-serif;
font-size: 1.2em;
letter-spacing: 0.1em;
text-align: center;
transition: background 0.3s ease-in-out;
}
.button:hover {
background: #00c8ff;
}
</style>
</head>
<body>
<ul>
<li>
<input type="text" placeholder="用户名">
</li>
<li>
<input type="password" placeholder="密码">
</li>
<li>
<input type="text" placeholder="手机号码">
</li>
<li>
<input type="text" placeholder="邮箱">
</li>
<li>
<input type="submit" class="button" value="注册">
</li>
</ul>
</body>
</html>
input输入框:focus时美化效果
最新推荐文章于 2024-06-05 14:57:08 发布