Nếu chúng tôi muốn tạo kiểu gốc của phần tử tập trung, chúng tôi sử dụng CSS:focus-inside pseudo-class.
Các ví dụ sau minh họa CSS:focus-inside pseudo-class.
Ví dụ
<!DOCTYPE html> <html> <head> <style> form { margin: 2%; padding: 2%; display: flex; flex-direction: column; background: thistle; } input { margin: 2%; } form:focus-within { background-color: burlywood; box-shadow: 0 0 12px rgba(0,0,0,0.6) } input:focus { box-shadow: 0 0 12px rgba(0,0,0,0.6) } </style> </head> <body> <form> <input type="text" placeholder="name"/> <input type="email" placeholder="email"/> </form> </body> </html>
Đầu ra
Điều này sẽ tạo ra kết quả sau -
Ví dụ
<!DOCTYPE html> <html> <head> <style> div { width: 40%; margin: 2%; padding: 2%; display: flex; flex-direction: column; background: lavenderblush; } div > * { margin: 2%; } div:focus-within { background-color: aliceblue; box-shadow: 0 0 12px rgba(0,0,0,0.6) } </style> </head> <body> <div> <textarea></textarea> <button>Click</button> </div> </body> </html>
Đầu ra
Điều này sẽ tạo ra kết quả sau -