Hiệu ứng "phát sáng" của trường văn bản như trang đăng nhập Twitter và Tumblr?

Question

Cách tốt nhất để đạt được hiệu ứng phát sáng khi tập trung vào trường văn bản trong HTML là gì? Nó có thể được thực hiện với CSS một mình, hay nó liên quan đến hình ảnh? Kiểm tra các trang đăng nhập cho Twitter và Tumblr để biết các ví dụ làm việc.

Answer 1

Chỉ cần sử dụng :focus pseudo-class, border và box-shadow:

.text:focus { 
    border: 1px solid #07c; 
    box-shadow: 0 0 10px #07c; 
} 

Here's a demo.

Oh, và here's my favorite combination.

Answer 2

tôi sẽ tiếp cận nó bằng cách sử dụng một bóng hộp CSS và sau đó thiết lập các màu sang màu xanh chứ không phải màu xám/đen.

Answer 3

CSS:

#form1:focus { border: 2px solid blue; } 

HTML:

<input id="form1" type="text"/> 

cách khác mà tôi tìm thấy:

Make glowing effect around the text box while active

Answer 4

sử dụng focus

mẫu:http://jsfiddle.net/uday99/kFGmC/23/

Answer 5

Nếu bạn đang sử dụng qua trình duyệt phương pháp tiếp cận:

.active-field, .selector-for-field:focus { 
-webkit-box-shadow: 0 0 3px rgb(34%, 71%, 94%); 
-khtml-box-shadow: 0 0 3px rgb(34%, 71%, 94%); 
-moz-box-shadow: 0 0 3px rgb(34%, 71%, 94%); 
-o-box-shadow: 0 0 3px rgb(34%, 71%, 94%); 
box-shadow: 0 0 3px rgb(34%, 71%, 94%); 
border:1px solid rgb(34%, 71%, 94%); 
} 

Sau đó thêm lớp này đến lĩnh vực được đánh dấu trên nhấp chuột hoặc tập trung, vv khi cần thiết.

Bạn cũng có thể lấy các tài liệu cụ thể của IE nếu cần.

Answer 6

Hoặc hình ảnh, hoặc CSS Box shadow http://css-tricks.com/snippets/css/css-box-shadow/