今天为大家大家带来一个小案例，表单没有凹凸感，有兴趣的朋友可以过来关注一下。
关键代码：
<head>
<title>去除表单默认凹凸样式</title>
<style>
body {
margin: 50px;
background: #f8f8f8;
}
.form-box {
width: 350px;
}
.item {
margin: 15px 0;
}
input, textarea, button {
width: 100%;
padding: 10px;
font-size: 14px;
/* 核心：清除浏览器默认凹凸、立体样式 */
border: 1px solid #ddd;
outline: none;
box-shadow: none;
background: #fff;
border-radius: 4px;
}
/* 鼠标聚焦样式，只改边框颜色，不出现凹凸 */
input:focus, textarea:focus {
border-color: #409eff;
}
button {
background: #409eff;
color: #fff;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="form-box">
<div class="item">
<input type="text" id="username" placeholder="请输入用户名">
</div>
<div class="item">
<input type="password" id="pwd" placeholder="请输入密码">
</div>
<div class="item">
<textarea rows="4" id="msg" placeholder="留言内容"></textarea>
</div>
<div class="item">
<button id="submitBtn">提交表单</button>
</div>
</div>
<script>
// 简单表单提交交互
const submitBtn = document.getElementById('submitBtn');
submitBtn.onclick = function () {
let name = document.getElementById('username').value;
let pwd = document.getElementById('pwd').value;
if (name === '' || pwd === '') {
alert('内容不能为空');
return;
}
alert('表单提交成功');
}
</script>
</body>
评论