CSS 实现文本框样式设置

在网页设计中，文本框是用户输入信息的重要交互元素，通过 CSS 对其样式进行精心设置，不仅能提升用户体验，还能增强页面的美观度与专业性。

设置文本框的基本外观。可以通过 width 和 height 属性来定义文本框的宽度和高度，以适应不同的布局需求。例如，将一个文本框宽度设为 300px，高度设为 40px：

input[type="text"] {
    width: 300px;
    height: 40px;
}

边框是文本框的重要视觉部分。使用 border 属性可以设置边框的宽度、样式和颜色。比如创建一个 2px 宽的蓝色实线边框：

input[type="text"] {
    border: 2px solid blue;
}

若想要更柔和的效果，还能设置边框半径，让文本框边角变圆。border - radius 属性就能实现这一点，数值越大，边角越圆润：

input[type="text"] {
    border - radius: 5px;
}

文本框的背景颜色也能进行定制。利用 background - color 属性，可轻松打造出个性化的背景。比如将背景设为淡灰色：

input[type="text"] {
    background - color: #f0f0f0;
}

为了提升用户体验，当鼠标悬停在文本框上时，可以改变其样式。通过 :hover 伪类来实现这一效果。例如，当鼠标悬停时，将边框颜色变为红色：

input[type="text"]:hover {
    border: 2px solid red;
}

文本框内文本的样式同样不容忽视。可以通过 color 属性设置文本颜色，font - size 和 font - family 属性调整字体大小和字体类型。例如：

input[type="text"] {
    color: #333;
    font - size: 16px;
    font - family: Arial, sans - serif;
}

还可以对文本框获取焦点（即用户点击进入文本框准备输入时）的状态进行样式设置，通过 :focus 伪类实现。比如，当文本框获得焦点时，移除默认的轮廓线，并添加一个阴影效果：

input[type="text"]:focus {
    outline: none;
    box - shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

通过这些 CSS 样式设置技巧，能让文本框在网页中脱颖而出，为用户带来更舒适、美观的输入体验。无论是简单的表单页面，还是复杂的应用程序界面，合理运用这些方法都能极大提升页面的整体品质。