input框focus时的美化效果

最新推荐文章于 2024-01-26 19:39:08 发布

原创最新推荐文章于 2024-01-26 19:39:08 发布 · 3.1k 阅读

2 ·

CC 4.0 BY-SA版权

html+css+div 专栏收录该内容

78 篇文章

订阅专栏

本文介绍了一种CSS样式的输入框实现方法，详细说明了输入框的边框、内边距、圆角等属性，并展示了如何在获取焦点时改变输入框的样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
}