1. 基本样式：
input[type="text"] {
width: 300px;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
这个样式设置了文本框的宽度、内边距、外边距、边框、边框圆角和盒模型。
2. 聚焦状态：
input[type="text"]:focus {
outline: none; /* 移除默认的聚焦样式 */
border-color: #007bff; /* 设置聚焦时的边框颜色 */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* 添加聚焦时的阴影效果 */
}
这个样式设置了文本框在聚焦状态下的外观，包括边框颜色和阴影效果。
3. 禁用状态：
input[type="text"]:disabled {
background-color: #eee; /* 设置禁用状态的背景颜色 */
color: #888; /* 设置禁用状态的文本颜色 */
}
这个样式设置了文本框在禁用状态下的外观，包括背景颜色和文本颜色。
4. 悬停状态：
input[type="text"]:hover {
border-color: #666; /* 设置悬停时的边框颜色 */
}
这个样式设置了鼠标悬停在文本框上时的外观，包括边框颜色。
你可以根据具体的项目需求，进一步自定义这些样式。这只是一个基础的参考，你可以根据实际情况进行调整和修改。将这些样式添加到你的 CSS 文件中，或者在 HTML 文件中的 <style> 标签内添加。
转载请注明出处：http://www.zyzy.cn/article/detail/3163/HTML