Add over-ride for select2 styles on low resolution devices

alphagov · Sep 30, 2024 · 94b09e9 · 94b09e9
1 parent 601243b
commit 94b09e9
Showing 1 changed file with 15 additions and 0 deletions.
diff --git a/app/assets/stylesheets/bootstrap_and_overrides.scss b/app/assets/stylesheets/bootstrap_and_overrides.scss
@@ -178,3 +178,18 @@ html[dir=rtl] {
 .select2-search-choice-close {
   background: url("select2.png") right top no-repeat
 }
+
+@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx) {
+  .select2-search input,
+  .select2-search-choice-close,
+  .select2-container .select2-choice abbr,
+  .select2-container .select2-choice .select2-arrow b {
+    background-image: url("select2x2.png") !important;
+    background-repeat: no-repeat !important;
+    background-size: 60px 40px !important
+  }
+
+  .select2-search input {
+    background-position: 100% -21px !important
+  }
+}