html页面简单大方的文本框获取鼠标特效

程序员温眉

已于 2023-09-05 15:49:57 修改

阅读量623

点赞数 2

分类专栏： html5 文章标签： input框特效点击事件点击动态 input

于 2019-09-26 15:15:29 首次发布

本文链接：https://blog.csdn.net/sublime_k/article/details/101446019

版权

html5 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

【版权所有，文章允许转载，但须以链接方式注明源地址，否则追究法律责任】
【创作不易，点个赞就是对我最大的支持】

前言

仅作为学习笔记，供大家参考
总结的不错的话，记得点赞收藏关注哦！

input框特效获取焦点事件及失去焦点事件的动态效果

前端:

	<input type="text" placeholder="请输入关键字" name="title" id="title"  TYPE="text" SIZE="29" style="width: 291px;" />

css:

	 #title {
			width:30%;
			height:40px;
			border:1px solid #dbdbdb;
			outline:none;
			font-size:20px;
			text-indent:10px;
		}
label {
		position:relative;
		width:291px;
		margin:10px auto;
		display:inline-block;
	} 
	label:after {
		content:"";
		display:inline-block;
		width:0;
		height:2px;
		background:red;
		transition:width 1s;
		position:absolute;
		bottom:1px;
		left:1px;
	}
	.active:after {
		width:calc(100% - 2px)
	}

js

	 $("input").focus(function() {
		       $(this).parent("label").addClass("active");
		   });
		   $("input").blur(function() {
		       if ($(this).val() == "") {
		           $(this).parent("label").removeClass("active");
		       }
		   });

创作不易，点个赞就是对我最大的支持~

wxgzh：程序员温眉

CSDN：程序员温眉

每天进步一点点的程序员