作为一些还未被浏览器完全支持的伪选择器，作为渐进增强还是不错的。
placeholder-show：placeholder显示出来的时候
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>placeholder-shown</title> <style> form{ position: relative; padding-top: 30px; } label{ position: absolute; top: 0; left: 0; font-size: var(--font-size-small); opacity: 1; transform: translateY(0); transition: .2s; } input:placeholder-shown + label{ opacity: 0; transform: translateY(1em); } </style> </head> <body> <form action=""> <input type="text" name="" id="" placeholder="Enter some text"> <label for="">enter some text</label> </form> </body> </html>
required：必填的输入框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>required</title> <style> span{ opacity: 0 } input:required + span{ opacity: 1 } </style> </head> <body> <form action=""> <input type="text" name="" id="" placeholder="Enter some text" required> <span>required</span><br> <input type="text" name="" id="" placeholder="Enter some text"> <span>required</span> </form> </body> </html>
disabled：禁止输入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>disabled</title> <style> span{ opacity: 0 } input:disabled{ border: 1px solid #ccc; } </style> </head> <body> <form action=""> <input type="text" name="" id="" placeholder="Enter some text" disabled> </form> </body> </html>
read-only：只读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>read-only</title> <style> span{ opacity: 0 } input:read-only{ background-color: var(--gray-lighter); } </style> </head> <body> <form action=""> <input type="text" name="" id="" placeholder="Enter some text" readonly> </form> </body> </html>
out-of-range：number类型的输入框超过了限定值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>out-of-range</title> <style> span{ opacity: 0 } input:out-of-range + span{ opacity: 1 } </style> </head> <body> <form action=""> <input type="number" name="" id="" placeholder="Enter some text" min="0" max="10"> <span>out of range</span> </form> </body> </html>