JQurey input输入框聚焦变色

最新推荐文章于 2024-04-25 10:51:54 发布

原创最新推荐文章于 2024-04-25 10:51:54 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jqurey #javascript #css

jqurey案列专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现输入框聚焦时背景颜色变化的方法。通过为获得焦点的元素添加特定类名，从而改变其样式。适用于网页表单交互设计。

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

这里写图片描述

CSS代码
设置默认的css在js中用
<style type="text/css">

    /*设置获得焦点背景颜色*/
    .focus{
        background: green;
        border: 1px solid red;
    }

    </style>
HTML代码
 <form action="" id="from1" method="post">
        <fieldset>
            <legend>个人基本信息</legend>
            <div>
                <label for="username">用户名:</label>
                <input id="username" type="text"></input>
            </div>
            <div>
                <label for="pwd">密码:</label>
                <input id="pwd" type="password"></input>
            </div>
        </fieldset>
    </form>

js代码

$(function(){

    $(":input").focus(function(){
        $(this).addClass("focus");
    }).blur(function(){
        $(this).removeClass("focus");
    });

});