phát sáng xung quanh div có đường viền và màu sắc

Question

Có cách nào để thêm ánh sáng xung quanh div không? Nhìn vào đăng nhập twitter và làm thế nào có một ánh sáng màu xanh xung quanh hộp đầu vào, có thể được thực hiện cho div?

Answer 1

Đây là mã hoàn chỉnh để tạo kiểu một div giống hệt như đầu vào twitter đăng nhập. Kiểu cho đường viền màu xanh lam là kiểu dáng box-shadow và border cho công cụ chọn div[contenteditable]:focus. Live demo here (click).

Markup:

<div contenteditable="true">Username or email</div> 

CSS:

div[contenteditable]:focus { 
    border: 1px solid rgb(86, 180, 239); 
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(82, 168, 236, 0.6); 
} 

div[contenteditable] { 
    width: 97%; 
    max-width: 280px; 
    margin-right: 10px; 

    font-family: Arial,sans-serif; 

    -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075); 
    box-shadow: inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.075); 

    display: inline-block; 
    padding: 4px; 
    margin: 0; 
    outline: 0; 
    background-color: #fff; 
    border: 1px solid #ccc; 
    border-radius: 3px; 

    font-size: 13px; 
    line-height: 20px; 
} 

Answer 2

CSS3 thể làm điều đó

-webkit-box-shadow:0 0 20px blue; 
-moz-box-shadow: 0 0 20px blue; 
box-shadow:0 0 20px blue; 

Làm việc JSFiddle.

Answer 3

Ngoài ra, bạn sẽ gặp phải một số sự cố với Internet Explorer trong khi xử lý vấn đề này. IE-9 thế nào bao giờ hỗ trợ hộp bóng nhưng các phiên bản trước không, Kiểm tra nó ra here để làm cho nó hoạt động trong tất cả các phiên bản của IE

Answer 4

Như đã trình bày trước đây, sử dụng css: focus, border và box-shadow.

Nếu sử dụng IE, đảm bảo rằng <doctype> được chỉ định.

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

jsFiddle example.