当鼠标聚焦时输入框变色（focus事件实例） |
您所在的位置：网站首页 › 心动奇迹电影中的狗是什么狗 › 当鼠标聚焦时输入框变色（focus事件实例） |
当鼠标聚焦时输入框变色（focus事件实例）
 图片.png当鼠标聚焦时输入框变色css相关,鼠标点击输入域后出现有颜色的边框原理：css伪类之input输入框鼠标点击边框变色效果伪类元素的使用：:focus 一：当输入框获得焦点时，改变它的背景色效果图：当鼠标聚焦时输入内部填充色改变  图片.png
鼠标点击输入域后出现有颜色的边框
* {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代码： .inp:focus { border-style:solid; border-color: #03a9f4; box-shadow: 0 0 15px #03a9f4; }js实现的方法： 输入框点击时边框变色效果 .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边框同时变色： .look {background:#e6e6e6;border:1px solid #e6e6e6;} function doClickStyle(obj,objclassname){ document.getElementById(obj).className=objclassname; } |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |