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");
}