在CSS初级项目中，表单输入框的默认样式通常比较简陋，边框生硬、内部留白不合理，获取焦点时也没有明显的视觉反馈，很容易影响页面的整体美观度和用户的使用体验。我们可以通过border、padding和focus伪类三个核心属性，快速完成输入框的美化工作。
一、基础输入框结构搭建
首先我们需要先准备一个基础的HTML表单输入框结构，后续的CSS样式都会基于这个结构来编写。输入框通常使用<input>标签，类型为text，同时可以添加placeholder属性作为提示文本。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单输入框美化示例</title>
</head>
<body>
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" class="input-field" placeholder="请输入用户名">
</div>
</body>
</html>
二、使用border属性美化边框
border属性用来设置元素的边框样式，包含边框宽度、边框样式、边框颜色三个子属性，我们可以用来替换输入框默认的黑色实线边框，让边框更贴合页面风格。
1. border基础用法
我们可以通过border简写属性一次性设置三个子属性，也可以单独设置某一个子属性。常见的边框样式有solid（实线）、dashed（虚线）、dotted（点线）等。
/* 基础边框样式设置 */
.input-field {
/* 设置边框宽度2px，实线样式，浅灰色边框 */
border: 2px solid #e0e0e0;
/* 设置输入框宽度和高度 */
width: 300px;
height: 40px;
/* 去掉输入框默认的轮廓线 */
outline: none;
}
2. 圆角边框设置
如果觉得直角边框太生硬，还可以配合border-radius属性设置圆角，让输入框看起来更柔和。
.input-field {
border: 2px solid #e0e0e0;
width: 300px;
height: 40px;
outline: none;
/* 设置4px圆角，数值越大圆角越明显 */
border-radius: 4px;
}
三、使用padding调整内部留白
padding属性用来设置元素内容和元素边框之间的内边距，默认的输入框内部文字紧贴边框，看起来很拥挤，我们可以通过padding来调整内部留白，提升可读性。
.input-field {
border: 2px solid #e0e0e0;
width: 300px;
height: 40px;
outline: none;
border-radius: 4px;
/* 上下内边距8px，左右内边距12px */
padding: 8px 12px;
/* 设置输入框内文字的字体大小 */
font-size: 14px;
/* 设置文字颜色 */
color: #333333;
}
这里需要注意，如果设置了固定的height高度，再添加padding会增加输入框的总高度，我们可以通过box-sizing: border-box属性让padding和border计入元素的总宽度和高度内，避免布局错乱。
.input-field {
border: 2px solid #e0e0e0;
width: 300px;
height: 40px;
outline: none;
border-radius: 4px;
padding: 8px 12px;
font-size: 14px;
color: #333333;
/* 让padding和border计入总宽高 */
box-sizing: border-box;
}
四、使用focus伪类设置焦点状态
focus伪类是输入框获取焦点时触发的样式，比如用户点击输入框或者按Tab键切换到输入框时，就会触发这个伪类的样式。我们可以给焦点状态设置不同的边框颜色，给用户明确的操作反馈。
/* 输入框获取焦点时的样式 */
.input-field:focus {
/* 焦点时边框变为蓝色 */
border-color: #1a73e8;
/* 可以添加轻微的阴影增强视觉效果 */
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}
这里的box-shadow属性用来设置阴影，第一个值是水平偏移，第二个值是垂直偏移，第三个值是模糊半径，第四个值是阴影颜色，rgba颜色最后一位是透明度，0.2表示20%的透明度，不会太突兀。
五、完整示例代码
下面是整合了所有样式的完整示例，直接保存为HTML文件就可以在浏览器中查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单输入框美化示例</title>
<style>
.form-group {
margin: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-size: 14px;
color: #666666;
}
.input-field {
border: 2px solid #e0e0e0;
width: 300px;
height: 40px;
outline: none;
border-radius: 4px;
padding: 8px 12px;
font-size: 14px;
color: #333333;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}
.input-field:focus {
border-color: #1a73e8;
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2);
}
.input-field::placeholder {
color: #999999;
}
</style>
</head>
<body>
<div class="form-group">
<label for="username">用户名：</label>
<input type="text" id="username" class="input-field" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="email">邮箱：</label>
<input type="email" id="email" class="input-field" placeholder="请输入邮箱地址">
</div>
</body>
</html>
示例中我们还添加了transition属性，让边框颜色和阴影的变化有0.2秒的过渡效果，看起来更流畅，同时用::placeholder伪元素调整了提示文字的颜色，整体效果会更协调。
六、常见问题说明
- 如果输入框在焦点时还有默认的蓝色轮廓，需要设置
outline: none去掉，否则会和自定义的焦点样式冲突。 - 设置padding后输入框高度变化，记得添加
box-sizing: border-box避免布局问题。 - focus伪类的样式不要设置得太夸张，轻微的颜色变化和阴影就足够给用户反馈，避免影响页面整体风格。