css—4表单相关伪类

input:enabled{ color:red;} input:disabled{ color:blue;}

enabled or disable

表单的状态

input:checked{ width:100px;height:100px;}


<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>无标题文档</title><style>input:checked{ width:100px;height:100px;}</style></head><body><input type="checkbox" /></body></html>

View Code

表格获取焦点 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="width: 200px;height: 200px;background: red;" contenteditable="true" ></div> </body></html>

input:focus

 

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="width: 200px;height: 200px;background: red;" contenteditable="true" ></div> </body></html>

!importent

 

相关文章