Tôi muốn khôi phục cài đặt CSS outline mặc định trên một số trường biểu mẫu nhưng tôi muốn khôi phục về kiểu Webkit hoặc trình duyệt cụ thể theo mặc định.Khôi phục đường viền CSS của Webkit trên trường nhập
Trang tôi đang làm việc có outline: none được áp dụng trên tất cả các thành phần và tôi chỉ muốn hoàn nguyên về cài đặt mặc định trên một số yếu tố. Bất kỳ ý tưởng?
Thay vì đặt lại với đường viền: không, đặt lại với chiều rộng đường viền: 0. Điều này ngăn trình duyệt xóa phong cách và khi bạn áp dụng lại chiều rộng, kiểu sẽ vẫn ở đó.
input:focus {
outline-width: 0;
}
input.nostyle:focus {
outline-width: 5px;
}
sử dụng lớp học trên các trường bạn muốn mà không có đường viền.
.nool { outline: none; }
OneOfOne là chính xác. CSS không cho phép bạn "hoàn tác" kiểu. Nếu bạn có thể, hãy loại bỏ bất kỳ quy tắc css nào đang áp dụng "outline: none" cho mọi phần tử và sử dụng một lớp để nhắm mục tiêu cụ thể các phần tử biểu mẫu nào không có đường viền. – jbarreiros
@jbarreiros: Mặc dù nó hoạt động, nó không phải là một giải pháp thanh lịch hoặc ngữ nghĩa để đưa các lớp vào mọi thứ. Giải pháp của Duopixel hoàn thành điều này bằng cách sử dụng CSS thuần túy. – Wylie
Câu trả lời cho câu hỏi thực tế của bạn (straight from WebKit's default html.css styles) là thế này:
:focus {
outline: auto 5px -webkit-focus-ring-color;
}
Giá trị của -webkit-focus-ring-color được xác định trên mỗi nền tảng riêng (nếu bạn là siêu sắc sảo, bạn có thể tìm kiếm WebCore::systemFocusRingColor). Trong thực tế, các giá trị thay đổi theo nền tảng.
Trong Safari v6 và v20 Chrome trên OS X Lion, giá trị thực tế là:
outline: rgb(94, 158, 215) auto 5px;
... và trong v20 Chrome trên Windows và Chromium v18 trên Linux, giá trị tôi nhận được:
outline: rgb(229, 151, 0) auto 5px;
Như được mô tả trong this great StackOverflow answer, bạn có thể run this jsFiddle to calculate the outline colour on your own machine.
Đây phải là câu trả lời được lựa chọn, mặc dù duopixel cung cấp một số thông tin chi tiết tốt. – ooolala
Mặc dù đây không phải là câu trả lời thực tế, nhưng nó là một giải pháp rất tốt. Cảm ơn! –