当鼠标聚焦时输入框变色（focus事件实例）-原创手记-慕课网

webp

图片.png

当鼠标聚焦时输入框变色
css相关,鼠标点击<input>输入域后出现有颜色的边框
原理：css伪类之input输入框鼠标点击边框变色效果
伪类元素的使用：:focus

一：当输入框获得焦点时，改变它的背景色

效果图：当鼠标聚焦时输入内部填充色改变

webp

图片.png

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>鼠标点击<input>输入域后出现有颜色的边框</title><style type="text/css">* {margin: 0; padding: 0;}.main {margin: 50px auto; width: 400px;}.inp {width: 200px;height: 30px;
}.inp:focus {outline:none;border: 1px solid #CCCCCC;background:#f0ecec;
}</style></head><body><div class="main"><input type="text" class="inp"><div   class="yanzhen">111</div></div></body></html>

==========================

二：效果图：当鼠标聚焦时外部border变色，css实现的方法：

实现点击的时候出现蓝色光晕

webp

图片.png

代码：

.inp:focus {   border-style:solid;  
    border-color: #03a9f4;  
    box-shadow: 0 0 15px #03a9f4; 
}

js实现的方法：

<!DOCTYPE ><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="textml; charset=utf-8" /><title>输入框点击时边框变色效果</title></head><body><style type="text/css">.focusInput {border:1px solid #99CC33;}</style><script type="text/javascript"> function focusInput(focusClass) {  var elements = document.getElementsByTagName("input");  for (var i=0; i < elements.length; i++) {    if (elements[i].type != "button" && elements[i].type != "submit" && elements[i].type != "reset") {
      elements[i].onfocus = function() { this.className = focusClass; };
      elements[i].onblur = function() { this.className = ''; };
    }
  }
}window. = function () {
  focusInput('focusInput');
}</script>请输入姓名：<input type="text" /></body></html>

================================

三：js控制input内部填充背景和border边框同时变色：

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>.look {background:#e6e6e6;border:1px solid #e6e6e6;}</style>
    </head>
    <script language="javascript" type="text/javascript">function doClickStyle(obj,objclassname){document.getElementById(obj).className=objclassname;
}</script>
    <body><input type="text" id="text10" tabindex="17" " onfocus="doClickStyle('text10','look')"  onblur="doClickStyle('text10','nolook')" value="" /> 
    </body></html>

四：css点击一个input输入框怎么使其后面的button也变色

以摩拜单车为例，参考链接：http://www.w3school.com.cn/jquery/event_focus.asp
本专题记录平时项目中一些最基础简单的实现代码和容易忽略的细节，仅仅是为了记录，对于自己来说，基础是最重要的，一个项目就是由无数的基础组成

作者：祈澈菇凉
链接：https://www.jianshu.com/p/eaa956d91435