当鼠标聚焦时输入框变色
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. How Blink works

    How Blink works Author: haraken@ Last update: 2018 Aug 14 Status: PUBLIC Working on Blink is not eas ...

  2. opengl绘制三维人物luweiqi

    素材中有四个.bmp格式的纹理文件和一个.txt的模型参数文件 文件格式说明: 纹理文件数量 纹理文件1(字符串)//.bmp 纹理文件2(字符串) 纹理文件3(字符串) . . . 材质数量 amb ...

  3. python 爬虫使用

    python爬虫架构 Python 爬虫架构主要由五个部分组成,分别是 调度器.URL管理器.网页下载器.网页解析器.应用程序. 调度器:相当于一台电脑的CPU,主要负责调度URL管理器.下载器.解析 ...

  4. CMDB学习之七-实现采集错误捕捉，日志信息处理

    首先采集disk的具体实现方上代码: # !/usr/bin/env python # -*- coding:utf-8 -*- from .base import BasePlugin import ...

  5. CCF模拟题 最大的矩形

    最大的矩形 时间限制: 1.0s 内存限制: 256.0MB     问题描述 在横轴上放了n个相邻的矩形,每个矩形的宽度是1,而第i(1 ≤ i ≤ n)个矩形的高度是hi.这n个矩形构成了一个直方 ...

  6. POJ——T 2299 Ultra-QuickSort

    http://poj.org/problem?id=2299 Time Limit: 7000MS   Memory Limit: 65536K Total Submissions: 62894   ...

  7. Thinkphp的 is null 查询条件是什么，以及exp表达式如何使用

    Thinkphp的 is null 查询条件是什么,以及exp表达式如何使用 一.总结 一句话总结:$map['name'] = array('exp','is null'); 1.is null判断 ...

  8. 洛谷P1439 最长公共子序列（LCS问题）

    题目描述 给出1-n的两个排列P1和P2,求它们的最长公共子序列. 输入输出格式 输入格式: 第一行是一个数n, 接下来两行,每行为n个数,为自然数1-n的一个排列. 输出格式: 一个数,即最长公共子 ...

  9. 洛谷P2251 质量检测

    题目背景 无 题目描述 为了检测生产流水线上总共N件产品的质量,我们首先给每一件产品打一个分数A表示其品质,然后统计前M件产品中质量最差的产品的分值Q[m] = min{A1, A2, ... Am} ...

  10. C#使用一般处理程序(ashx)中session

    .ashx中引用 session必须 using System.Web.SessionState ,继承IReadOnlySessionState/IRequiresSessionState IRea ...