如何将Shopify货币转换器的:after箭头置于边框内部？

Hey there! Let's get that dropdown arrow sitting reliably inside the border of your .vitals-nice-select element, so you don't have to tweak the right property across different themes.

The Root of the Issue #

Your current setup uses fixed values for both the container's padding-right and the arrow's right position. When themes override or adjust these container styles, the arrow can end up outside the border or misaligned. To fix this, we need to tie the arrow's position to the container's internal spacing, so it stays consistent regardless of theme tweaks.

Modified CSS Solution #

Here's how to adjust your code to keep the arrow inside the border consistently:

First, update the container styles to reserve consistent space for the arrow:

.vitals-nice-select { 
  -webkit-tap-highlight-color: transparent; 
  background-color: #fff; 
  color: #333; 
  box-sizing: border-box; 
  clear: both; 
  cursor: pointer; 
  display: block; 
  float: left; 
  font-family: inherit; 
  font-size: 14px; 
  font-weight: normal; 
  height: 42px; 
  line-height: 40px; 
  outline: none; 
  padding-left: 18px; 
  /* Reserve space for arrow + match left padding for balanced spacing */
  padding-right: calc(18px + 20px); 
  position: relative; 
  text-align: left !important; 
  -webkit-transition: all 0.2s ease-in-out; 
  transition: all 0.2s ease-in-out; 
  -webkit-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  user-select: none; 
  white-space: nowrap; 
  width: auto; 
  border-radius: 5px; 
  border: solid 1px #e8e8e8; 
  /* Optional: Use a variable for easy global adjustments */
  --input-padding: 18px;
} 

.vitals-nice-select:hover { 
  border-color: #dbdbdb; 
}

Then adjust the arrow's position to align with the container's internal padding:

.vitals-nice-select:after { 
  border-bottom: 2px solid #999; 
  border-right: 2px solid #999; 
  content: ''; 
  display: block; 
  height: 5px; 
  margin-top: -4px; 
  pointer-events: none; 
  position: absolute; 
  /* Align arrow with container's left padding for consistent spacing */
  right: var(--input-padding, 18px); 
  top: 50%; 
  -webkit-transform-origin: 66% 66%; 
  -ms-transform-origin: 66% 66%; 
  transform-origin: 66% 66%; 
  -webkit-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  transform: rotate(45deg); 
  -webkit-transition: all 0.15s ease-in-out; 
  transition: all 0.15s ease-in-out; 
  width: 5px; 
}

Why This Works #

• We use calc() to set the container's padding-right to match the left padding plus extra space for the arrow, ensuring the arrow never touches or crosses the right border.
• The CSS variable (--input-padding) lets you adjust the spacing for both the container and arrow in one place if you need to tweak the layout later.
• By tying the arrow's right value directly to the container's internal padding, it stays aligned even if themes modify other container styles like width or border size.

Quick Tweak Tips #

• If the arrow feels too tight or loose against the border, adjust the 20px value in padding-right: calc(18px + 20px) to add more or less buffer space.
• Test across your target themes to confirm the arrow stays inside the border consistently.

内容的提问来源于stack exchange，提问作者Cristi Duma