diff --git a/packages/core/src/components/html-select/_common.scss b/packages/core/src/components/html-select/_common.scss index f8446d3698..840f3a721b 100644 --- a/packages/core/src/components/html-select/_common.scss +++ b/packages/core/src/components/html-select/_common.scss @@ -12,7 +12,7 @@ -webkit-appearance: none; border-radius: $pt-border-radius; height: $pt-button-height; - padding: 0 ($input-padding-horizontal * 2.5) 0 $input-padding-horizontal; + padding: 0 ($input-padding-horizontal * 3) 0 $input-padding-horizontal; // fill parent container width: 100%; /* stylelint-enable property-no-vendor-prefix */ @@ -39,11 +39,13 @@ cursor: not-allowed; } -%pt-select-arrow { +%pt-select-icon { color: $pt-icon-color; pointer-events: none; position: absolute; - right: $input-padding-horizontal * 0.7; + // N.B. it's more important for the icon to vertically align with button right icons rather than + // input right padding, see https://github.com/palantir/blueprint/issues/6184 + right: $pt-grid-size; top: ($pt-button-height - $pt-icon-size-standard) * 0.5; &.#{$ns}-disabled { diff --git a/packages/core/src/components/html-select/_html-select.scss b/packages/core/src/components/html-select/_html-select.scss index 73e4f94196..6ff48ae2f7 100644 --- a/packages/core/src/components/html-select/_html-select.scss +++ b/packages/core/src/components/html-select/_html-select.scss @@ -41,15 +41,10 @@ Styleguide select &:disabled { @extend %pt-select-disabled; } - - &::-ms-expand { - // IE11 styling to hide the arrow - display: none; - } } .#{$ns}-icon { - @extend %pt-select-arrow; + @extend %pt-select-icon; @include pt-icon-colors(); } @@ -98,14 +93,14 @@ Styleguide select .#{$ns}-html-select { .#{$ns}-icon { - @extend %pt-select-arrow; + @extend %pt-select-icon; } } // N.B. this icon implementation is deprecated and will be removed in Blueprint 6.0 .#{$ns}-select { &::after { - @extend %pt-select-arrow; + @extend %pt-select-icon; @include pt-icon(); content: map-get($blueprint-icon-codepoints, "double-caret-vertical"); }