DOMUI Prefs: Improve focus appearance on Mac

chrome/browser/resources/options/options_page.css

 body {
   cursor: default;
   font-size: 100%;
 }
 
 a:link {
   color: rgb(63, 110, 194);
 }
 
 a:active {
@@ skipping 541 matching lines @@
 html[enable-cloud-print-proxy=false] #cloud-print-proxy-section {
  display: none;
 }
 
 html[enable-cloud-print-proxy=true] #cloudPrintProxyManageButton {
  display: none;
 }
 
 /* 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'],
 input[type='text'] {
   -webkit-border-radius: 2px;
   border: 1px solid #aaa;
   font-size: inherit;
   padding: 3px;
 }
 
@@ skipping 90 matching lines @@
 }
 
 html[os=mac] label > input[type=checkbox],
 html[os=mac] label > input[type=radio] {
   margin-top: 2px;
 }
 
 .suboption {
   -webkit-margin-start: 16px;
 }