如何静态旋转背景图（URL）且不影响内部内容？含下拉箭头示例

这里提供几种可靠的实现方式，都能保证不翻转select内的文字内容：

方法1：直接修改SVG箭头路径（最轻量化） #

直接调整SVG的路径数据，让箭头本身就是向上的，不需要额外CSS。替换.JForm-mobile里的背景SVG即可：

.JForm-mobile {
    display: block;
    background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m18.7,105.4c1.6,1.6 4.2,1.6 5.8,0l51-51.1 51.1,51.1c1.6,1.6 4.2,1.6 5.8,0 1.6-1.6 1.6-4.2 0-5.8l-53.9-53.9c-0.8-0.8-1.8-1.2-2.9-1.2-1,0-2.1,0.4-2.9,1.2l-53.9,53.9c-1.7,1.6-1.7,4.2-0.1,5.8z' fill='white'/></g></svg>") no-repeat;
    background-position: right 10px top 45%;
    background-size: 15px;
}

修改后的路径是原箭头垂直翻转后的结果，直接替换就能得到向上的箭头，完全不影响select的文字显示。

方法2：用伪元素承载箭头并旋转（更灵活） #

如果需要保留原SVG，或以后要动态切换箭头方向，可以把箭头放到select的伪元素里，单独旋转伪元素：

1. 先调整主样式，给箭头留出足够空间：

.JForm__menustyle {
    height: min-content;
    font-weight: 700;
    font-size: 20px;
    padding: 5px 35px 5px 15px; /* 右侧增加padding，避免文字覆盖箭头 */
    border-radius: 18px;
    transition: background-color 0.2s ease, max-height 0.5s ease;
    cursor: pointer;
    user-select: none;
    border: none;
    appearance: none;
    position: relative;
    width: 200px;
    overflow: hidden;
}

2. 移除原背景图，改用伪元素实现箭头：

.JForm-mobile {
    display: block;
}

.JForm-mobile::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(180deg); /* 垂直居中+旋转180度 */
    width: 15px;
    height: 15px;
    background: url("data:image/svg+xml;utf8,<svg viewBox='0 0 140 140' width='24' height='24' xmlns='http://www.w3.org/2000/svg'><g><path d='m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z' fill='white'/></g></svg>") no-repeat center;
    background-size: contain;
    pointer-events: none; /* 不干扰select的点击交互 */
}

这种方式的优势是后续切换箭头方向只需要修改rotate(180deg)为rotate(0deg)即可，灵活度更高，且完全不会影响select内的文字。

内容的提问来源于stack exchange，提问作者Josh Silveous