一些新的偽選擇器
阿新 • • 發佈：2017-11-18
posit disabled -c red 只讀 htm 瀏覽器 put ack
作為一些還未被瀏覽器完全支持的偽選擇器，作為漸進增強還是不錯的。
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>
一些新的偽選擇器