首页表单点击文字变色HTML

表单点击文字变色HTML

时间: 2024-12-02 09:11:07 浏览: 11

在HTML中，你可以通过CSS来实现表单点击时的文字颜色变化。通常，这涉及到给文本元素添加一个`onclick`事件处理程序，并利用`:hover`伪类来改变文字的颜色。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <style> /* 默认样式 */ .color-normal { color: black; } /* 点击或鼠标悬停时的颜色 */ .color-hover { color: red; /* 可以自定义颜色 */ } </style> </head> <body> <form> <label for="example">点击这里：</label> <input type="text" id="example" onclick="changeColor(this)" onmouseover="this.classList.add('color-hover')" onmouseout="this.classList.remove('color-hover')"> </form> <script> function changeColor(inputElement) { if (inputElement.classList.contains('color-hover')) { inputElement.style.color = 'black'; // 回复默认颜色 } else { inputElement.style.color = 'red'; // 变成红色 } } </script> </body> </html> ``` 在这个示例中，当用户点击输入框或鼠标悬停在其上时，文字会变为红色；离开时则恢复为黑色。`changeColor`函数用于控制颜色的变化。

阅读全文