当鼠标聚焦时输入框变色(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后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

React Native 学习资源精选仓库

React Native Awesome汇集了各类react-native学习资料、工具、组件、开源App、资源下载、以及相关新闻等,只求精不求全。 如果你是...

56570
来自专栏程序员宝库

神奇的选择器 :focus-within

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

12020
来自专栏菩提树下的杨过

[转自blueidea]像table一样布局div Ⅰ

翻译自:Equal height boxes with CSS 原文:http://www.456bereastreet.com/archive/200405...

26070
来自专栏老马寒门IT

04-移动端开发教程-在线字体

在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其...

1.1K60
来自专栏HTML5学堂

DIV+CSS布局和TABLE布局的优缺点

HTML5学堂:TABLE布局是早以前CSS不存在的时候兴起的,是对TABLE标签的不正规使用,Table标签就是表格,是用来显示数据的,而不是用来布局网页的,...

42990
来自专栏向治洪

react-native-android之初次相识

作为一名Android开发者,我的感觉就是,一步一卡,卡的潇洒。 但是我还是要学react-native,不要问我为什么,因为我相信一门解决了原生app,开...

20660
来自专栏前端知识分享

第134天:移动web开发的一些总结(二)

width —— 视口宽高 height —— 视口宽高 device-width —— 设备的宽高 device- height —— 设备的宽高 orien...

22510
来自专栏前端知识分享

第135天:移动端开发经验总结

会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动

21330
来自专栏杨逸轩 ' sBlog

响应式Web设计技巧以及入门技巧

15780
来自专栏JadePeng的技术博客

jQuery Mobile 教程 (1)

    移动互联网是块诱人的大蛋糕,在手机屏上,到底是C/S横扫一切,还是B/S力争一席之地?我相信,B/S还是很有希望的。在找移动Web App开发的资料,发...

39960

扫码关注云+社区

领取腾讯云代金券