CSS - Xóa trường nhập hiện hoạt nổi bật

Question

Chỉ sử dụng html và css, làm cách nào để tắt màu đánh dấu màu xanh lam (trong Firefox) xung quanh trường nhập hiện hoạt. Tôi đã thử sử dụng input {outline:none;} nhưng không thành công. Cảm ơn sự giúp đỡ! =)

ok, bỏ qua mã trước đó về đường viền, tôi đã chọn thuộc tính sai để thay đổi. Những gì tôi đang cố gắng để có được chỉ đơn giản là loại bỏ các đánh dấu (bất cứ trình duyệt, viền đậm và màu của nó xuất hiện) xung quanh một lĩnh vực đầu vào hình thức hoạt động, mà không thay đổi hoặc vô hiệu hóa kiểu dáng. Cảm ơn =)

Answer 1

Xem điều này fiddle.

Dường như bạn phải đặt một số thuộc tính biên giới để thực hiện outline: none hoạt động. Nếu bạn nhận xét trong chỉ thị biên giới, đường viền sẽ biến mất.

Answer 2

Để tháo thử nhấn thêm quy tắc này đến lĩnh vực đầu vào (s):

-moz-appearance:none; 

này cũng có thể được thực hiện cho các trình duyệt WebKit dựa sử dụng tiền tố tương ứng:

-webkit-appearance:none; 

Điều này sẽ chăm sóc của bất kỳ biên giới, phác thảo, vv chỉ sử dụng một tài sản CSS. Đối với các trình duyệt không phải là cặp WebKit và Firefox - Opera và IE - bạn cũng nên bao gồm các thuộc tính border và outline, đảm bảo khả năng tương thích chéo của trình duyệt.

Answer 3

input {border:0; outline:none;} 

nên xóa tất cả đường viền/đường viền.

Answer 4

Câu trả lời là đơn giản hơn tôi reliased:

box-shadow:none; 

Answer 5

Bạn phải sử dụng: khai tập trung. Trong trường hợp này:

input:focus {outline:none;} 

Tất cả đầu vào trong dự án của bạn sẽ không có viền màu xanh.

Nếu bạn muốn có một thuộc tính cụ thể, sử dụng này:

input[type=text]:focus {outline:none;} 

Hy vọng nó giúp.=)

Answer 6

này nên làm việc cho hầu hết các loại đầu vào trên Firefox:

input::-moz-focus-inner { border: 0; } 

Answer 7

cách tốt nhất để làm điều đó cho tất cả các trình duyệt trong việc giữ thẻ đầu vào của bạn trong một thẻ div để che biên giới

HTML đang

<div class='rel lef srch_blck'> 
    <input type='text' class='rel lef srch_pad' name='srch_inp'/> 
</div> 

để html ở trên cho phép thêm css sau đây để có loại bỏ biên giới

.srch_blck{ overflow:hidden;width:298px;height:28px; } 
.srch_pad{ left:-1px;top:-1px;width:300px;height:31px; } 

Answer 8

Giải pháp của tôi là trước hết phải giết trình duyệt mặc định trên đầu vào và cung cấp cho nó một biên giới mặc định như thế này:

input[type="text"], 
input[type="password"], 
input[type="email"], 
input[type="tel"], 
input[type="url"], 
input[type="search"], 
textarea { 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    border: 1px solid #ddd; 
} 

Sau đó, tôi thiết lập lại cho hộp bóng và phác thảo như thế này:

input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="email"]:focus, 
input[type="tel"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
textarea:focus { 
    border: 1px solid #ccc; 
    box-shadow: none !important; 
    outline: none !important; 
} 

Làm việc cho tôi trong tất cả các trình duyệt hiện đại được thử nghiệm cho đến nay (IE, FF, Chrome, Operah & Safari).