input:enabled{ color:red;}
input:disabled{ color:blue;}
enabled or disable表单的状态
input:checked{ 100px;height:100px;}
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> input:checked{ 100px;height:100px;} </style> </head> <body> <input type="checkbox" /> </body> </html>
表格获取焦点 input:focus{} !不适用div
input:focus{
background: pink;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:focus{
background: pink;
}
div:focus{
background: blue;
}
</style>
</head>
<body>
<input type="text" value="" />
<div style=" 200px;height: 200px;background: red;" contenteditable="true" ></div>
</body>
</html>
input 模拟单选框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
input:focus{
background: pink;
}
div:focus{
background: blue;
}
</style>
</head>
<body>
<input type="text" value="" />
<div style=" 200px;height: 200px;background: red;" contenteditable="true" ></div>
</body>
</html>