当鼠标聚焦时输入框变色（focus事件实例） |
您所在的位置：网站首页 › ps边框变色之后还是不行 › 当鼠标聚焦时输入框变色（focus事件实例） |
当鼠标聚焦时输入框变色（focus事件实例）
 图片.png 当鼠标聚焦时输入框变色 css相关,鼠标点击输入域后出现有颜色的边框 原理：css伪类之input输入框鼠标点击边框变色效果 伪类元素的使用：:focus 一：当输入框获得焦点时，改变它的背景色效果图：当鼠标聚焦时输入内部填充色改变  图片.png 代码语言：javascript复制 鼠标点击输入域后出现有颜色的边框 * {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; } 111========================== 二：效果图：当鼠标聚焦时外部border变色，css实现的方法：实现点击的时候出现蓝色光晕  图片.png 代码： 代码语言：javascript复制.inp:focus { border-style:solid; border-color: #03a9f4; box-shadow: 0 0 15px #03a9f4; }js实现的方法： 代码语言：javascript复制 输入框点击时边框变色效果 .focusInput {border:1px solid #99CC33;} 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.onload = function () { focusInput('focusInput'); } 请输入姓名：================================ 三：js控制input内部填充背景和border边框同时变色：代码语言：javascript复制 .look {background:#e6e6e6;border:1px solid #e6e6e6;} function doClickStyle(obj,objclassname){ document.getElementById(obj).className=objclassname; } |
【本文地址】
今日新闻 |
推荐新闻 |