Index: static/scss/components/_browser-select.scss |
=================================================================== |
--- a/static/scss/components/_browser-select.scss |
+++ b/static/scss/components/_browser-select.scss |
@@ -32,8 +32,30 @@ |
width: 100%; |
max-width: 300px; |
} |
#browser-select li |
{ |
cursor: pointer; |
} |
+ |
+#browser-select .pre-icon |
+{ |
+ opacity: 0.5; |
+ |
+ /* Firefox 10+, Firefox on Android */ |
+ filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); |
+ |
+ /* IE 6-9 */ |
+ filter: gray; |
+ |
+ /* Modern browsers */ |
+ filter: grayscale(100%); |
+} |
+ |
+#browser-select .custom-select-selected .pre-icon, |
+#browser-select .custom-select-option:hover .pre-icon, |
+#browser-select .custom-select-option:focus .pre-icon |
+{ |
+ opacity: 1; |
+ filter: none; |
+} |