DOMUI Prefs: Improve focus appearance on Mac

chrome/browser/resources/options/options_page.css

Index: chrome/browser/resources/options/options_page.css
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 4fd4a86bb0e6b73ae7ffd665aff9893b21b0d177..11af7bdb31dfa07686c8e270c101ebe87546f1e4 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -559,12 +559,20 @@ html[enable-cloud-print-proxy=true] #cloudPrintProxyManageButton {
 
 /* UI Controls */
 
-button:focus,
-input:focus,
-input[type='submit']:focus,
-select:focus {
+/* Currently we can't make custom focus outlines look right on the Mac, so
+ * we stick to native focus rings. Once outlines follow border radius, we
+ * can revisit.
+ */
+html:not([os=mac]) button:focus,
+html:not([os=mac]) input:focus,
+html:not([os=mac]) input[type='submit']:focus,
+html:not([os=mac]) select:focus {
   outline-color: rgba(0, 128, 256, 0.5);
 }
+html[os=mac] button:focus,
+html[os=mac] input[type='submit']:focus {
+  outline-offset: -2px;
+}
 
 /* TEXT */
 input[type='password'],