LWC中lightning-select组件自定义问题：默认值不显示及下拉背景不透明

• 在LWC的lightning-select标签中设置value="Select unit"，页面加载时该字段显示空白，预期显示“Select unit”
• 打开下拉菜单时背景为白色，无法设置为透明，同时需要下拉菜单文本为白色（适配页面深色背景）

用户尝试的代码：

HTML代码 #

<Lightning-layout class="slds-align_absolute-center">
    <lightning-layout-item>
        <lightning-input id="heightInput" value="Enter height" class="inputItemsClass slds-m-right_small"></lightning-input>
    </lightning-layout-item>
    <lightning-layout-item>
        <lightning-select id="selectHeightUnit" value="Select unit" options={heightUnitList} class="selectHeightUnitsClass slds-m-left_small"></lightning-select>
    </lightning-layout-item>
</Lightning-layout>

CSS代码 #

.selectHeightUnitsClass {
    --slds-c-select-color-background: none;
    --slds-c-select-color-background-focus: none;
    --slds-c-select-text-color-focus: black;
    --slds-c-select-text-color: white;
    --slds-c-select-text-color-focus: white;
}

.inputItemsClass {
    --slds-c-input-color-background: none;
    --slds-c-input-text-color:white;
}

问题1：默认提示文本不显示 #

lightning-select的value属性必须匹配options数组中某一项的value值，不能直接设置未在选项中存在的文本。解决步骤：

1. 在JS中给heightUnitList添加默认选项：

heightUnitList = [
    { label: 'Select unit', value: 'Select unit' },
    // 其他示例选项
    { label: 'cm', value: 'cm' },
    { label: 'inch', value: 'inch' }
];

2. 在组件中绑定一个初始值为'Select unit'的属性，替代直接写死的value：

<lightning-select id="selectHeightUnit" value={selectedUnit} options={heightUnitList} class="selectHeightUnitsClass slds-m-left_small"></lightning-select>

3. 在JS中初始化selectedUnit：

selectedUnit = 'Select unit';

问题2：下拉菜单背景无法透明 #

lightning-select的下拉菜单属于全局overlay，不在组件shadow DOM内，需用:global()选择器控制样式，同时修正SLDS变量的取值：

.selectHeightUnitsClass {
    --slds-c-select-color-background: transparent; /* 用transparent替代none更规范 */
    --slds-c-select-color-background-focus: transparent;
    --slds-c-select-text-color: white;
    --slds-c-select-text-color-focus: white;
    --slds-c-select-border-color: white; /* 可选：给输入框加白色边框，适配深色背景 */
}

/* 控制下拉菜单容器样式 */
.selectHeightUnitsClass :global(.slds-dropdown) {
    background-color: transparent;
    border: 1px solid white; /* 可选：加边框区分下拉区域 */
}

/* 下拉选项文本和背景 */
.selectHeightUnitsClass :global(.slds-dropdown .slds-listbox__option) {
    color: white;
    background-color: transparent;
}

/* 下拉选项hover效果 */
.selectHeightUnitsClass :global(.slds-dropdown .slds-listbox__option:hover) {
    background-color: rgba(255, 255, 255, 0.1); /* 浅色半透明hover，适配深色背景 */
}

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