Javascript表单AJAX样式

Javascript form AJAX styling

本文关键字：样式 AJAX 表单 Javascript      更新时间：2023-09-26

我使用下面的代码创建一个简单的表单。我如何使它，当有人点击其中一个输入字段，边框改变颜色?提前感谢

<style>
.texta {  
  color: #CDCBCB;  
  background-color: #FFFFFF;  
  border: 1px solid #E2E2E2;
  font-style:italic
}  
.sendbutton {
    background:#F6F6F6; color:#999999;
    border: 1px solid #E2E2E2;  
    cursor:pointer;
    padding:5px 10px;
    -webkit-border-radius:8px
}
</style>

<form action="mailto:email@email.com" method="post" enctype="text/plain">
<div style="height:12px;"><input type="text" name="name" value="Name (required)" size="40" class="texta"></div><br>
<div style="height:12px;"><input type="text" name="mail" value="Email (required)" size="40" class="texta"></div><br>
<div style="height:12px;"><input type="text" name="comment" value="Subject (required)" size="40" class="texta"></div><br>
<textarea name="Message" value="Message (required)" cols="40" rows="6" class="texta"></textarea><br>
<br><input type="submit" value="&nbsp; &nbsp; Send &nbsp;&nbsp;" class="sendbutton">
</form>

为.texta:focus添加一个CSS规则，并设置border-color

你也可以使用jQuery。只需下载jQuery (http://jquery.com/)并将此代码放入....但是，我认为CSS的解决方案更好。

<script>
    $("input:text")
    .focus(function(){
        $(this).css("border-color", "#F00");
    })
    .focusout(function(){
        $(this).css("border-color", "#333");
    });
</script>
相关文章：