css input文本框获取焦点

最新推荐文章于 2025-05-16 10:03:07 发布

原创最新推荐文章于 2025-05-16 10:03:07 发布 · 1.3w 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用CSS为HTML中的输入框和文本区域设置样式的简单方法，当元素获得焦点时，边框变为红色并带有浅灰色背景。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		input , textarea{ 
			outline:none;
		}
		input:focus , textarea:focus{
			border: 1px solid red;
			background: #ddd;
		}
	</style>
</head>
<body>
	<from>
		<input type="username" />
		<input type="pass" />
		<textarea name="" id="" cols="30" rows="10"></textarea>
	</from>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input , textarea{
outline:none;
}
input:focus , textarea:focus{ 获取焦点改变颜色
border: 1px solid red;
background: #ddd;
}
</style>
</head>
<body>
<from>
<input type="username" />
<input type="pass" />
<textarea name="" id="" cols="30" rows="10"></textarea>
</from>
</body>
</html>