Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Learn More

Bring back native focus outline for URL bar with userChrome.css on OS X

  • 2 trả lời
  • 1 gặp vấn đề này
  • 29 lượt xem
  • Trả lời mới nhất được viết bởi avenged110

more options

Hi, I figured if anyone knew how to accomplish this, someone here would, because I'm at a loss.

I'm looking to use userChrome.css customizations to bring back the native focus outline (the blue glow) around the URL bar when it's in focus. I feel like this should definitely be possible in one way or another.

This is how my URL bar looks currently: image 1 below (or: https://imgur.com/IQDXejh) This is the "glow" to which I'm referring, which is native to OS X: image 2 below (or: https://imgur.com/ImA6Of8) For the record, I was only able to achieve that second example by using ":root #urlbar {-moz-appearance: textfield;}" which is obviously out of the question and only to illustrate the outline I'm seeking to add to URL bar in the first example.

Put another way, I just want my URL bar to use the native OS X outline glow when in focus (instead of my current 2px border) without changing any other styling, custom or otherwise (as much as possible).

I'm using 78.2.0esr on OS X 10.9.5 and the full contents of my userChrome.css file are: https://pastebin.com/QFsxdaF5 Thank you in advance for any help. Please let me know if I missed something important or can provide anymore information.

Đính kèm ảnh chụp màn hình

Giải pháp được chọn

That would be something like this in userChrome.css. Make sure to add the "!important" flag to override existing rules and you may have to define your own color. This rule copied from Firefox 68 works for the urlbar and the search bar.

#urlbar:not(.hidden-focus)[focused="true"],
.searchbar-textbox[focused="true"] {
  border-color: var(--toolbar-field-focus-border-color) !important;
}


Đọc câu trả lời này trong ngữ cảnh 👍 0

Tất cả các câu trả lời (2)

more options

Giải pháp được chọn

That would be something like this in userChrome.css. Make sure to add the "!important" flag to override existing rules and you may have to define your own color. This rule copied from Firefox 68 works for the urlbar and the search bar.

#urlbar:not(.hidden-focus)[focused="true"],
.searchbar-textbox[focused="true"] {
  border-color: var(--toolbar-field-focus-border-color) !important;
}


Được chỉnh sửa bởi cor-el vào

Hữu ích?

more options

Thank you for the reply. I still believe that the problem is something in Firefox is overriding or blocking OS X from applying its own native (glow) styling to the type of text-entry field used by the URL bar. As I alluded to above, changing the URL bar to a "textfield" element bypasses this and results in the proper focus outline being applied. Unfortunately, it...bypasses all styling since the element is different, which is what I'm trying to avoid. I am relatively confident there should be a way to style a text entry field (like whatever type the URL bar is) while leaving the operating system's own focus style unmolested, but I'm certainly no expert in CSS.

All that said, your comment tipped me off to go looking in the past, so I explored some much older versions of FF when Mozilla was still trying to ape the native look as much as possible. From these values, I was able to achieve a near-perfect recreation seen in the screenshot below. While I'll always prefer the native focus outline, I'm marking this as solved because this is probably as good as it's ever going to get and I can live with that. Thanks for the tip.

Hữu ích?

Đặt một câu hỏi

Bạn phải đăng nhập vào tài khoản của bạn để trả lời bài viết. Vui lòng bắt đầu một câu hỏi mới, nếu bạn chưa có tài khoản.