css鼠标经过样式,单击文本框样式

最新推荐文章于 2025-04-28 14:11:23 发布

原创最新推荐文章于 2025-04-28 14:11:23 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #class #function #input #button #border

Web前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种使用HTML和内联样式实现表单元素的交互效果的方法，包括文本框聚焦时的颜色变化以及鼠标悬停在表格行上的背景色变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*聚焦时文本框为米黄色*/
.inputTxt {star : expression(
onfocus=function(){this.style.backgroundColor="#FFF8DC"},
onblur=function(){this.style.backgroundColor="#FFFFFF"})
}

/*鼠标经过列表单行亮色*/
.showLineColor {
BACKGROUND: #ffffff; COLOR: #000000; TEXT-DECORATION: none;
star : expression(
onmouseover=function(){this.style.backgroundColor="#D0E4FD"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"})
}

</style>
</head>
<body>
<center>
<table width="800px" border="1">
<tr class="showLineColor">
  <td>姓名： <input type="text" class="inputTxt"/></td>
</tr>
<tr class="showLineColor">
  <td>手机： <input type="text" class="inputTxt"/></td>
</tr>
<tr class="showLineColor">
  <td>性别： <input type="text" class="inputTxt"/></td>
</tr>
<tr class="showLineColor">
  <td>班别： <input type="text" class="inputTxt"/></td>
</tr>
<tr class="showLineColor">
  <td><input type="button" value="submit"></td>
</tr>
</table>
</center>
</body>