Issue #3223271 by mherchel, bnjmnm, pjudge, lauriii, javi-er,... (7357ae8a) · Commits · project / drupal

core/themes/olivero/css/components/form-select.css

+47 −6

Original line number	Diff line number	Diff line
		@@ -62,7 +62,7 @@ select:focus {

		select {

		/* Disables border of select specifically for ms browser */
		/* Hides default chevron within Internet Explorer. */
		}

		select::-ms-expand {
		@@ -99,17 +99,58 @@ select.form-element--small {

		select {

		/* Necessary for IE11 to show chevron. */
		/* Necessary to show chevron in forced colors mode in modern browsers. */
		}

		@media screen and (-ms-high-contrast: active) {
		@media (forced-colors: active) {

		select {
		background-image: url("data:image/svg+xml,%3csvg width='18' height='11' viewBox='0 0 18 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M18 1.49699C18 1.35271 17.9279 1.19038 17.8196 1.08216L16.9178 0.18036C16.8096 0.0721439 16.6473 0 16.503 0C16.3587 0 16.1964 0.0721439 16.0882 0.18036L9 7.26854L1.91182 0.18036C1.80361 0.0721439 1.64128 0 1.49699 0C1.33467 0 1.19038 0.0721439 1.08216 0.18036L0.180361 1.08216C0.0721442 1.19038 0 1.35271 0 1.49699C0 1.64128 0.0721442 1.80361 0.180361 1.91182L8.58517 10.3166C8.69339 10.4248 8.85571 10.497 9 10.497C9.14429 10.497 9.30661 10.4248 9.41483 10.3166L17.8196 1.91182C17.9279 1.80361 18 1.64128 18 1.49699Z' fill='%235D7585'/%3e%3c/svg%3e")
		[dir="ltr"] select {
		padding-right: 1.125rem
		}

		select[multiple] {
		[dir="rtl"] select {
		padding-left: 1.125rem
		}

		select {
		background-image: none;
		-webkit-appearance: listbox;
		-moz-appearance: listbox;
		appearance: listbox /* Default <select> appearance value for modern browsers. */

		/* Lets browser set <select> appearance to whatever the browser's default is. */
		}
		@supports ((-webkit-appearance: revert) or (-moz-appearance: revert) or (appearance: revert)) {

		select {
		-webkit-appearance: revert;
		-moz-appearance: revert;
		appearance: revert
		}
		}
		}

		select {

		/* Necessary for Internet Explorer to show chevron. */
		}

		@media screen and (-ms-high-contrast: active) {

		[dir="ltr"] select {
		padding-right: 0
		}

		[dir="rtl"] select {
		padding-left: 0
		}

		select {

		/* Re-enable default chevron for Internet Explorer. */
		}
		select::-ms-expand {
		display: block;
		}
		}

core/themes/olivero/css/components/form-select.pcss.css

+18 −5

Original line number	Diff line number	Diff line
		@@ -38,7 +38,7 @@ select {
		}
		}

		/* Disables border of select specifically for ms browser */
		/* Hides default chevron within Internet Explorer. */
		&::-ms-expand {
		display: none;
		}
		@@ -71,12 +71,25 @@ select {
		height: var(--sp2-5);
		}

		/* Necessary for IE11 to show chevron. */
		/* Necessary to show chevron in forced colors mode in modern browsers. */
		@media (forced-colors: active) {
		padding-inline-end: var(--sp);
		background-image: none;
		appearance: listbox; /* Default <select> appearance value for modern browsers. */

		/* Lets browser set <select> appearance to whatever the browser's default is. */
		@supports (appearance: revert) {
		appearance: revert;
		}
		}

		/* Necessary for Internet Explorer to show chevron. */
		@media screen and (-ms-high-contrast: active) {
		background-image: var(--form-element-select-icon);
		padding-inline-end: 0;

		&[multiple] {
		background-image: none;
		/* Re-enable default chevron for Internet Explorer. */
		&::-ms-expand {
		display: block;
		}
		}
		}