Làm cho hiệu ứng phát sáng xung quanh hộp văn bản trong khi hoạt động

Question

Tạo hiệu ứng phát sáng xung quanh hộp văn bản trong khi đặt con trỏ vào bên trong hộp văn bản. Ví dụ: chỉ cần đặt con trỏ bên trong hộp văn bản tìm kiếm trong stackoverflow.com của chúng tôi.

Của nó vì css, nhưng tôi không biết làm thế nào để đạt được nó .. Xin hãy giúp tôi.

Answer 1

Trong khi hiệu ứng bạn quan sát trên luồng ngăn xếp searc h hộp có thể là trình duyệt cụ thể (ví dụ: Google Chrome) có một cách để đạt được những gì bạn muốn sử dụng lớp giả CSS :focus:

#foo:focus { border: 2px solid red; }

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

Answer 2

tài sản Outline

http://www.w3schools.com/css/pr_outline.asp

Nếu bạn muốn nó xuất hiện khi nhấp chuột vào một hộp văn bản:

input:focus { outline: /* whatever */ } 

IE7 không hỗ trợ: tập trung chọn, nhưng bạn có thể sử dụng jQuery :

$("input").focus(function() { 
    $(this).css('outline','yellow solid thin'); 
}); 

Answer 3

Rõ ràng phác thảo không được hỗ trợ bởi IE7 và ngay cả khi nó đã được tôi nghi ngờ nó sẽ "sáng". Bạn cần phải làm điều này với một hình nền tùy chỉnh hoặc một cái gì đó. Có một ví dụ về làm điều đó ở đây:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084560.html

BTW: Bạn nói "Màu đường viền". Đường viền không phải là đường viền. Bạn chỉ có thể sử dụng:

<input onfocus="this.style.border='2px solid yellow'"> 

Bạn có thể làm điều đó với CSS: tập trung vào lớp giả nhưng có khả năng là IE6/7 không hỗ trợ nó.

Answer 4

Thay vì phác thảo, các box-shadow tài sản đạt một hiệu ứng đẹp rất mịn của bất kỳ trường văn bản:

field { 
    border-color: #dbdbdb; 
} 

field:focus { /* When you click on the field... */ 
    border-color: #6EA2DE; 
    box-shadow: 0px 0px 10px #6EA2DE; 
} 

Dưới đây là một JSFiddle Demo Tôi đã từng làm bản thân mình thấy mã trên với một hiệu ứng chuyển phai.

Answer 5

số-

input[type=text], textarea { 
    -webkit-transition: all 0.30s ease-in-out; 
    -moz-transition: all 0.30s ease-in-out; 
    -ms-transition: all 0.30s ease-in-out; 
    -o-transition: all 0.30s ease-in-out; 
    outline: none; 
    padding: 3px 0px 3px 3px; 
    margin: 5px 1px 3px 0px; 
    border: 1px solid #DDDDDD; 
} 

input[type=text]:focus, textarea:focus { 
    box-shadow: 0 0 5px rgba(81, 203, 238, 1); 
    padding: 3px 0px 3px 3px; 
    margin: 5px 1px 3px 0px; 
    border: 1px solid rgba(81, 203, 238, 1); 
} 

nhân khẩu học http://www.labshab.com/submit-guest-posts/