首页用html写一个文本框，当运行以后文本框颜色是灰色，鼠标放在文本框上以后，文本框边框变成红色背景为黄色当鼠标点击文本框以后文本框边框变成蓝色背景为黄色并给出提示语句，提示语句为红色

用html写一个文本框，当运行以后文本框颜色是灰色，鼠标放在文本框上以后，文本框边框变成红色背景为黄色当鼠标点击文本框以后文本框边框变成蓝色背景为黄色并给出提示语句，提示语句为红色

时间: 2024-11-13 10:23:49 浏览: 23

要在HTML中创建这样一个带有多状态效果的文本框，你可以使用CSS样式结合HTML元素。首先，我们创建一个基本的`<input>`标签作为文本框，并设置初始样式： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> .textbox { color: gray; /* 初始文本颜色 */ border: 1px solid #ccc; /* 默认边框颜色 */ background-color: white; /* 初始背景颜色 */ } .textbox:hover { border-color: red; /* 鼠标悬停时边框颜色 */ background-color: yellow; /* 鼠标悬停时背景颜色 */ } .textbox:focus { outline: none; /* 消除默认焦点样式 */ border-color: blue; /* 点击后边框颜色 */ background-color: yellow; /* 点击后背景颜色 */ color: red; /* 提示语句颜色 */ font-weight: bold; /* 提示语句加粗 */ position: relative; } .textbox::before { content: "提示语句"; /* 提示语句内容 */ position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 2em; /* 设置提示的高度 */ } </style> </head> <body> <input type="text" class="textbox" /> </body> </html> ``` 在这个例子中，`.textbox`是文本框的基本样式，`:hover`表示鼠标悬停，`:focus`表示获取焦点。当用户点击文本框时，`.focus`选择器会应用额外的样式，包括红色提示语句。请注意，这个例子没有涉及到JavaScript来处理实际的提示显示或隐藏，因为HTML和CSS本身并不支持动态文本的插入或删除。如果需要动态效果，你可能需要配合JavaScript使用。

阅读全文