Add a custom arrow to the dropdown (#95)

* Add a custom arrow to the dropdown * Remove old arrow, and pass though mouse clicks. --------- Co-authored-by: modmuss50 <[email protected]>
FabricMC · Jun 2, 2024 · 2d70095 · 2d70095
1 parent 8db12ff
commit 2d70095
Showing 1 changed file with 9 additions and 6 deletions.
diff --git a/_sass/fabric.scss b/_sass/fabric.scss
@@ -165,6 +165,7 @@ p {
     }
 
 		.javadoc-selector {
+			position: relative;
 			margin-bottom: 6px;
 
 			select {
@@ -184,17 +185,19 @@ p {
 				-moz-appearance: none;
 				appearance: none;
 
-				// Add back the arrow, see https://stackoverflow.com/a/57510283
-				background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23FFFFFF'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
-				background-size: 10px;
-				background-position: calc(100% - 16px) center;
-				background-repeat: no-repeat;
-
 				option {
 					background-color: $grey-color-very-dark;
 				}
 			}
 		}
+
+		.javadoc-selector::after {
+			content: "▼";
+			position: absolute;
+			right: 1rem;
+			top: 0.5rem;
+			pointer-events: none; 
+		}
 	}
 
 	img{