13、UI元素状态伪类选择器

最新推荐文章于 2023-06-17 17:36:30 发布

xuxianmei

最新推荐文章于 2023-06-17 17:36:30 发布

阅读量687

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.csdn.net/tlxxm/article/details/36895281

CSS 专栏收录该内容

36 篇文章

订阅专栏

本文通过一个具体的HTML页面示例展示了不同UI元素状态下的CSS伪类选择器的应用，包括:hover、:focus、:active、:enabled及:disabled等，通过改变背景颜色来直观呈现各状态的效果。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>UI元素状态伪类选择器</title>
<style type="text/css">
input[type="text"]:hover
{
	background-color:red;
	}
input[type="text"]:focus
{
	background-color:skyblue;
	
}
input[type="text"]:active
{
	background-color:yellow;}
 li input[type="text"]:enabled
{
	background-color:#936}
li input[type="text"]:disabled
{
	background-color:#0F0;}
	
</style>
</head>

<body>
<form>
<p>姓名：<input type="text" name="name"></p>
<p>地址：<input type="text" name="address"></p>
<fildset>
<ul>
<li><input type="text" value="可用状态"></li>
<li><input type="text" value="可用状态"></li>
<li><input type="text" value="禁用状态" disabled="disabled"></li>
<li><input type="text" value="禁用状态" disabled="disabled"></li>

</ul>

</fildset>
</form>

</body>
</html>