Fix the appearance of version/language selects

obulat · web-flow · commit 87f9f410b81b · 2021-05-09T07:55:01.000+03:00
The appearance:none needs a -webkit prefix to work in Safari and Chrome on Android.
Adding padding to the select's outer div fixes arrow overlapping with the select's value.
Adding outline offset for focus-visible makes the outline go around the border instead of within it (just around the inner select itself).
diff --git a/python_docs_theme/static/pydoctheme.css b/python_docs_theme/static/pydoctheme.css
@@ -454,6 +454,7 @@ dl > dt span ~ em {
         position: relative;
         border: 1px solid #a8a8a8;
         height: 30px;
+        padding-right: 7px;
     }
     .language_switcher_placeholder {
         margin-top: 2rem;
@@ -465,15 +466,20 @@ dl > dt span ~ em {
         top: 7px;
         width: 15px;
         height: 15px;
-        right: 3px;
+        right: 0;
         pointer-events: none;
     }
     .language_switcher_placeholder select,
     .version_switcher_placeholder select {
+        -webkit-appearance: none;
         appearance: none;
         border: 0;
         height: 100%;
     }
+    .language_switcher_placeholder:focus-visible,
+    .version_switcher_placeholder:focus-visible {
+        outline-offset: 5px;
+    }
     .language_switcher_placeholder select {
         width: 100%;
     }
