Customize a <select> tag in LWC

Question

I want to customize the tag of the LWC. I have made the background transparent. My background image is dark. So, I want my text to appear as white so that it is visible. Also, while selecting the options, I want the dropdown menu to be transparent with white text. Below are the issues am facing-

1. I have mentioned value = "Select unit" in the select tag. However, it appears blank in the web window. It should mention 'Select unit' when the page is loaded.No text visible in the select field

2. When the dropdown(all options) in opened, it has background as white instead of transparent. Is there a way to make it transparent?Unable to make dropdown transparent

Can someone please help me with this? Thank you!

I tried below code in HTML and CSS-

Below is my HTML code for the select component-

<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>

Below is the CSS code-

.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;
}

The background of the dropdown is still white. I want it to be transparent.