当鼠标聚焦时输入框变色(focus事件实例)
时间:2022-05-30
本文章向大家介绍当鼠标聚焦时输入框变色(focus事件实例),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
图片.png
当鼠标聚焦时输入框变色 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实现的方法:
实现点击的时候出现蓝色光晕
图片.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.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后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。
- 这货不是电源:硬件渗透测试平台 – Power Pwn
- Python进阶学习之阅读代码
- 代码安全审计:当file_exists遇上eval
- Python 异常处理完整指南
- 有趣的安全实验:利用多线程资源竞争技术上传shell
- NotSerializableException解决方法NotSerializableException
- 谁蹭了我的WiFi?浅谈家用无线路由器攻防
- 当输入流和输出流同时作用一个文件
- 揭秘:充电宝是如何盗取你的个人隐私的?
- 微软:暴力破解面前,增强密码复杂性基本没用
- 创建被图像填充的组件解释几处做法解释几点
- Android原生嵌入React Native
- React Native控件之Listview
- React Native控件只TextInput
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 详解 Numpy 中的视图和副本
- 详解 matplotlib 中的两种标注方法
- 混搭 TypeScript + GraphQL + DI + Decorator 风格写 Node.js 应用
- 彻底搞懂闭包,柯里化,手写代码,金九银十不再丢分!
- Kubernetes控制器--副本集ReplicaSet
- Awesome Kubernetes 系列:第一期
- Mongodb多键索引之数组文档
- 在 Cocos Creator 里画个炫酷的雷达图
- 用shader做一个柿子颜色的过场动画
- mysql 找出最新时间的一条数据
- 【NPM库】- 0x05 - 文件、路径操作
- MySQL中insert阻塞问题的分析
- Fedora32下编译安装Qemu5.1并创建ARM版本Linux虚拟机
- 面试官想问的HashMap,都在这一篇里面了!
- CentOS7下使用Mondo Rescue实现系统全备份