怎么使得文本框在点击的时候，边框的颜色变成绿色

最新推荐文章于 2023-09-22 10:53:32 发布

原创最新推荐文章于 2023-09-22 10:53:32 发布 · 2.6k 阅读

CC 4.0 BY-SA版权

本文介绍了使用CSS和jQuery使文本框在获得焦点时改变边框颜色的方法。提供了多种实现方案，包括纯CSS方法和结合jQuery的方式。

尊敬的用户，经系统检测，该篇日志中可能存在违规嫌疑内容，已被系统暂时屏蔽，请您检查。确认清理完毕后，请输入验证码申请解除屏蔽。
验证码：换一张
提 交
怎么使得文本框在点击的时候，边框的颜色变成绿色


如何使得文本框在点击的时候，边框的颜色变成绿色


------解决方案--------------------

<script src=/scripts/jquery-1.8.3.min.js></script>

<script>

$(function() {

  $(":text").focus(function() {

    $(this).css('border-color', '#0f0');

  }).blur(function() {

    $(this).css('border-color', '');

  })

});

</script>

<input type=text>

<input type=text>

<input type=text>

<input type=text>


------解决方案--------------------
用个css伪类就好了
input:focus {
border-style: solid;
border-color: #339933;
}
------解决方案--------------------



input:focus{

    border-style:solid;

    border-color:#339933

}


------解决方案--------------------
引用:

Quote: 引用:



input:focus{

    border-style:solid;

    border-color:#339933

}



如何用div类实现嘞？！

用jQuery:



<style type="text/css">

    .green{

        border-style:solid;

        border-color:#339933

    }

</style>

$("#你的input的ID").focus(

    function(){

        $("#你的div的ID").addClass("green");      

    }

).blur(

    function(){

        $("#你的div的ID").removeClass("green");       

});