input框focus时的美化效果

Posted afterrains

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input框focus时的美化效果相关的知识,希望对你有一定的参考价值。

input 
	border: 1px solid #ccc;
	padding: 7px 0px;
	border-radius: 3px;
	padding-left: 5px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
	-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow
		ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out
		.15s;
	transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s


input:focus 
	border-color: #66afe9;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
		rgba(102, 175, 233, .6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px
		rgba(102, 175, 233, .6)

以上是关于input框focus时的美化效果的主要内容,如果未能解决你的问题,请参考以下文章

美化input type=range标签滑动样式(带渐变效果)

HTML网页设计中Focus和Blur焦点怎么实现

input输入框美化

iOS中 H5的input输入框focus()无法自动拉起键盘(解决方法)

input单选框美化——自定义样式

使用ElementUI的@input,@change,@blur,@focus进行校验文本框的长度,提示还可以输入多少字