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

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

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

图片.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实现的方法：

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


代码：

.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.onload = 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/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

关注「编程微刊」公众号 ，在微信后台回复「领取资源」，获取IT资源300G干货大全。

公众号回复“1”，拉你进程序员技术讨论群.

当鼠标聚焦时输入框变色（focus事件实例）的更多相关文章

  1. focus([[data],fn]) 当元素获得焦点时，触发 focus 事件。

    focus([[data],fn]) 概述 当元素获得焦点时,触发 focus 事件.直线电机选型 可以通过鼠标点击或者键盘上的TAB导航触发.这将触发所有绑定的focus函数,注意,某些对象不支持f ...

  2. .net dataGridView当鼠标经过时当前行背景色变色；然后【给GridView增加单击行事件，并获取单击行的数据填充到页面中的控件中】

    1.首先在前台dataGridview属性中增加onRowDataBound属性事件 2.然后在后台Observing_RowDataBound事件中增加代码 protected void Obser ...

  3. 鼠标聚焦到Text输入框时，按回车键刷新页面原因及解决方法

    前提 一个form中只有一个输入框,当输入框获取焦点后,点击回车,导致整个页面都刷新,问题解决办法. 1.处理form  在form中添加事件 <form onsubmit="retu ...

  4. 鼠标HOVER时区块动画旋转变色的CSS3样式掩码

    鼠标hover时区块动画旋转变色的css3样式掩码<!DOCTYPE html> <html> <head> <meta charset="utf- ...

  5. Android Edittext聚焦时输入法挡住了EditText输入框的两种解决方案

    方案一.把整个布局文件用ScrollView套住.这样当你聚焦时虽然输入法也能够挡住一些输入框,但是你可以通过手动滑动看被挡住的内容. 方案二.在Activity中设置android:windowSo ...

  6. javascript鼠标双击时触发事件大全

    javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...

  7. 【jQeury】input输入框状态，input事件，blur事件，focus事件

    //输入框正在输入时 $("#test1").on('input',function(){ alert('正在输入'); }) //输入框得到焦点时 $("#test2& ...

  8. js监听input等表单输入框的变化事件oninput

    js监听input等表单输入框的变化事件oninput,手机页面开发中使用到文本框textarea输入字符监听文本框变化计算还可以输入多少字符,如果使用onkeyup的话是无法监听到输入法输入的文本变 ...

  9. 【五】jquery之事件（focus事件与blur事件）[提示语的出现及消失时机]

    例题:当鼠标移动到某个文本框时,提示语消失. 当失去焦点时,如果该文本框有内容,保存内容.没有内容,则恢复最初的提示语句 <!DOCTYPE html> <html> < ...

随机推荐

  1. ajax处理错误（六）

    使用ajax时必须留心两类错误,他们之间的区别源于视角不同. 一.第一类错误是从XMLHttpRequest对象的角度看到的问题:某些因素阻例如止了请求发送到服务器,例如DNS无法解析主机名,连接请求 ...

  2. OpenJDK源码研究笔记(十五):吐槽JDK中的10个富有争议的设计

    前14篇文章,分享了JDK中值得学习和借鉴的编码和设计方法. 每个硬币都是有两面的.Every coin has two sides. 当然,JDK中也有很多值得改进或者说富有争议的设计. 本篇,就来 ...

  3. mongodb适用和不适用的应用场景

    近期考虑把订单历史数据从Oracle数据库迁移到Nosql数据库做历史数据查询和分析,一天千万级数据.打算使用mongodb数据库.使用nodejs做查询和统计API,对并发请求量要求低,不知道有没有 ...

  4. awk依照多个分隔符进行切割

    我们知道awk能够进行类似于cut之类的操作.如一个文件data例如以下 zhc-123|zhang hongchangfirst-99|zhang hongchang-100|zhang 假设我们 ...

  5. [转]C语言字节对齐问题详解

    C语言字节对齐问题详解 转载:https://www.cnblogs.com/clover-toeic/p/3853132.html 引言 考虑下面的结构体定义: typedef struct{ ch ...

  6. 强制获取序列下一个值/当前值(oracle函数)

    原文链接--http://blog.csdn.net/qq525099302/article/details/47146393 为什么要使用函数来获取序列值请看这里 -- 创建获取序列下一个值的函数 ...

  7. 网管软件 LANDesk的配置(视频配截图)

    网管软件 LANDesk Server Manager 8.5的配置截图         LANDesk桌面管理套件是应用于大中型企业环境下的计算机管理的最佳解决方案.它提供了从计算机资产管理.软件分 ...

  8. javafx HTMLEditor

    public class EffectTest extends Application { //===================== private final String INITIAL_T ...

  9. （转）OpenCV 基本知识框架

    以下是对<学习OpenCV>一书知识框架的简单梳理 转自:http://blog.chinaunix.net/uid-8402201-id-2899695.html 一.基础操作      ...

  10. C_数组详解

    数组: 一 一维数组 1.1 一维数组的定义: 类型符 数组名[常量表达式]; int a[10]; 说明: 1.数组的命名规则遵循标识符命名规则. 2.定义时需要指定元素的个数.方括号里的常量表达式 ...