css优化text输入框代码的解析

最新推荐文章于 2024-06-29 16:52:06 发布

TimyChen

最新推荐文章于 2024-06-29 16:52:06 发布

阅读量631

点赞数

CC 4.0 BY-SA版权

分类专栏：自学感悟文章标签： css 优化

本文链接：https://blog.youkuaiyun.com/TimyChen/article/details/50781455

自学感悟专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用CSS优化的文本输入框实现方法，包括使用`border-box`布局，`calc()`计算尺寸，以及焦点、验证状态下的样式变化。通过设置伪元素和过渡效果，实现了输入框边框、内阴影和提示文字的动态效果。

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

<pre name="code" class="html"><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>输入框特效</title>
		<style>
			body{
				margin: 0;
				padding: 0;
				background: #fafafa;
			}
			.shuru{
				margin: 300px auto;
				width: 300px;
				height: 40px;
				border-radius: 20px;
				font-size: 20px;
			}
			/*将box-sizing设置为border-box，可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。*/
			.shuru input{
				-webkit-box-sizing: border-box;
				  -moz-box-sizing: border-box;
				  box-sizing: border-box;
				  width: 100%;
			/*calc()这个功能可以让em、px，%等单位进行加减*/
				  height: -webkit-calc(3em + 2px);
				  height: calc(3em + 2px);
				  margin: 0 0 1em;
				  padding: 1em;
				  border: 1px solid #ccc;
				  border-radius: 1.5em;
				  background: #fff;
				  resize: none;
				  outline: none;
			}
			/*聚焦时，边框颜色设为红色*/
			.shuru input[type="text"][required]:focus{
				border-color: red;
			}
			/*聚焦时，label中字体颜色为绿色*/
			input[type="text"][required]:focus+label[placeholder]:before{
				color: green;
			}
			/*text聚焦，且输入内容合法时，label中的内容上移20px的距离，时间为0.2秒，同时字体大小变为原来的0.8*/
			input[type="text"][required]:focus+label[placeholder]:before,
			input[type="text"][required]:valid+label[placeholder]:before{
				
				-webkit-transition-delay: 0.2s;
				-moz-transition-delay: 0.2s;
				-webkit-transform: translate(0,-20px) scale(0.8,0.8);
				-moz-transform: translate(0,-20px) scale(0.8,0.8);
			}
			/*当input里面的内容不合法时（未输入任何东西），label里的内容为alt中的内容，即‘请输入内容’*/
			input[type="text"][required]:invalid + label[placeholder][alt]:before {
				content: attr(alt);
			}
			/*调整，使label中的字体居中*/
			input[type="text"][required]+label[placeholder]{
				display: block;
				pointer-events: none;
				line-height:40px;
				margin-top: -webkit-calc(-54px);
  				margin-top: calc(-54px);
  				margin-left: calc(16px);
			}
			
			input[type="text"][required]+label[placeholder]:before{
				/*输入框中内容合法时，label中文字改为“内容”*/
				content:attr(placeholder);
				display: inline-block;
				margin: 0 calc(1em + 2px);
				padding: 0px 5px;
				color: #999;
				transition: 3s ease-in-out;
				-webkit-transition: 3s ease-in-out;
				/*背景图片在哪？我没找到。。。。不会是背景颜色吧。。。。。。*/
				background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
				background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
				background-image: linear-gradient(to bottom, #ffffff, #ffffff);
				/*控制背景大小*/
				-webkit-background-size: 100% 5px;
  				background-size: 100% 5px;
  				background-repeat: no-repeat;
				/*设置背景图片居中，作用是让label中的内容能遮盖边框线*/
  				background-position: center;
			}
		</style>
	</head>
	<body>
		<div class="shuru">
			<form>
				<input type="text" required="required" />
				<label alt="请输入内容" placeholder="内容"></label>
			</form>
		</div>
	</body>
</html>