]> BookStack Code Mirror - bookstack/commitdiff
Implemented custom select controls because apple hates web developers
authorDan Brown <redacted>
Tue, 27 Apr 2021 20:35:42 +0000 (21:35 +0100)
committerDan Brown <redacted>
Tue, 27 Apr 2021 20:36:08 +0000 (21:36 +0100)
They'd rather keep pushing their 2007 era strange form control styles
even though they're horribly outdated, ugly and hard to style. The
only way to override is a full nuking of the default styles, which means
we have to then implement the frigging arrow icon using hacks which would
then conflict with all other sensible browsers so we have to nuke their
styles aswell to ensure some stupid backgroud hack is used everywhere.

I bet apple don't even use their shite default control styles and nuke
them also, Lets see. Yup, First thing I see on the top of their homepage
is a locale select dropdown custom built from about 10 HTML elements. FML

For #2709

resources/sass/_forms.scss

index 11ea1cc7f89bc6b29ff52001613b10e568f868e0..c42399de11efdf91ef0a1bd61761740aa48b96e6 100644 (file)
@@ -196,6 +196,16 @@ input[type="color"], input[type="password"], select, textarea {
   @extend .input-base;
 }
 
+select {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23666666'><polygon points='0,0 100,0 50,50'/></svg>");
+  background-size: 12px;
+  background-position: calc(100% - 20px) 70%;
+  background-repeat: no-repeat;
+}
+
 input[type=date] {
   width: 190px;
 }