CSS 实现 Input 的动态样式美化

最新推荐文章于 2024-07-29 09:25:14 发布

Amazon Translator

最新推荐文章于 2024-07-29 09:25:14 发布

阅读量1.2k

点赞数

分类专栏：你不知道的CSS 文章标签： css html

本文链接：https://blog.csdn.net/qq_45140694/article/details/119349866

版权

你不知道的CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

展示效果：
在这里插入图片描述

结果：如果显示占位符，则为边框为5px的红色，表示用户未输入任何内容如果未显示任何占位符，则为默认白色，表示用户已键入内容

使用CSS 中的 :placeholder-show 伪类完成此操作。

什么是 :placeholder-show

CSS :placeholder-shown伪类用于确定元素是否显示占位符的对象（占位符表示input 内设置placeholder 的值），主要使用它来检查input内容是否为空。换句话说，根据用户在文本框（input，textarea）输入的内容如果为空，就可以从而应用一些动态样式进行美化。

代码

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<style type="text/css">

	input {
	  font-size: 1.3rem;
	  margin: 10px;
	  padding: 10px;
	  width: 300px;
	}
	/* 取消input 选中后的默认样式 */
	input:focus{outline: none;}
	
	body {
	  background: #333;
	}
	
	body {
	  padding-top: 4em;
	}
	
	form {
	  display: flex;
	  justify-content: left;
	  align-items: left;
	  flex-direction: column;
	}
	
	/*----------- 重要的是这里面的内容 :placeholder-shown-----------
	input:placeholder-shown {
	  border: 5px solid #A84335;
	}
</style>
<body>
	<form>
	  <input type="text" placeholder="里面没有值" value="这里面有输入内容">
	  <input type="text" placeholder="里面没有值">
	</form>
</body>
</html>