点击input框时改变边框颜色和占位符字体颜色

最新推荐文章于 2022-05-10 10:52:29 发布

dreamimport

最新推荐文章于 2022-05-10 10:52:29 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：学习项目文章标签： css html jquery

本文链接：https://blog.csdn.net/dreamimport/article/details/104918747

学习项目专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一种使用CSS和jQuery实现的输入框样式及焦点高亮效果的方法，包括如何设置输入框的基本样式，以及如何在获取焦点时改变边框颜色。

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

 <input type="text" name=""  class="" placeholder="请填写您的姓名">
        <input type="text" name=""  class="" placeholder="请填写手机号码">

.info_contents_5 .info_con_padding input{
  width: 100%;
  height: 1.46rem;
  margin-bottom: 0.4rem;
  border-radius: 5px;
  border: 1px solid #d8d8d8;
  font-size: 0.64rem;
  padding-left: 0.2rem;
  outline: none;
}
.info_contents_5 .info_con_padding .inputs::-webkit-input-placeholder{/*Webkit browsers*/
  color:#000;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
    $('input').focus(function(){
     $(this).css('border','1px solid #0678d1')
     $(this).addClass('inputs')
    })
    $('input').blur(function(){
      $(this).css('border','1px solid #d8d8d8')
      $(this).removeClass('inputs')
    })
  </script>