Unverified Commit 6c046beb authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3223271 by mherchel, bnjmnm, pjudge, lauriii, javi-er,... 

Issue #3223271 by mherchel, bnjmnm, pjudge, lauriii, javi-er, andrewmacpherson: Olivero: Select dropdown icons need more contrast in Windows High Contrast mode

(cherry picked from commit 7357ae8a)
parent 1fe6f50b

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;

    }

  }

}