自定义框阴影和动态箭头位置 select

Question

我在互联网上找到了一个定制 select，仅由 HTML 和 CSS 制成。

* {
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-color: inherit;
}


form {
    width: 114px;
    height: 100%;
    padding-bottom: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30px;
}

ul {
    list-style: none;
}

.select {
    width: 225px;
    height: 40px;
    cursor: pointer;
    background-color: white;
    box-shadow: 0 2px 0 white;
    border-radius: 2px;
}

.select_expand {
    width: 0;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
}

.select_expand::after {
    content: '[=11=]3E';
    position: absolute;
    top: 50%;
    right: 70px;
    transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
    color: black;
    font-size: 10px;
    pointer-events: none;
    z-index: 2;
    transition: all 250ms cubic-bezier(.4, .25, .3, 1);
          
}

.select_expand:hover::after {
    opacity: 1;
}

.select_expand:checked::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scaleY(1.75);
}

.select_expandLabel {
    display: block;
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.select_close {
    display: none
}

.select_closeLabel {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

.select_items {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 40px;
}

.select_input {
    display: none
}

.select_label {
    transition: all 250ms cubic-bezier(.4, .25, .3, 1);
    display: block;
    height: 0;
    font-size: 18px;
    line-height: 40px;
    overflow: hidden;
    color: black;
    background-color: #fff;
    cursor: pointer;
    padding-left: 15px;
}

.select_label-placeholder {
    height: 40px;
    vertical-align: middle;
    position: absolute;
    top: 0;
    padding-left: 15px;
}

.select_expand:checked+.select_closeLabel {
    display: block;
    box-shadow: 0 15px 30px 10px rgba(0, 0, 0, 0.1);
}

.select_expand:checked+.select_closeLabel+.select_options .select_label {
    height: 40px;
}

.select_expand:checked+.select_closeLabel+.select_options .select_label:hover {
    background-color: #f7f7f7
}

.select_expand:checked+.select_closeLabel+.select_options+.select_expandLabel {
    display: none
}

.select_input:checked+.select_label {
    height: 40px;
    margin-top: -40px;
}

<form>
    
    <ul class="select">
        <li>
            <input class="select_close" type="radio" name="awesomeness" id="awesomeness-close" value=""/>
            <span class="select_label select_label-placeholder">#</span>
        </li>
        
        <li class="select_items">
            <input class="select_expand" type="radio" name="awesomeness" id="awesomeness-opener"/>
            <label class="select_closeLabel" for="awesomeness-close"></label>
            
            <ul class="select_options">
                <li class="select_option">
                    <input class="select_input" type="radio" name="awesomeness" id="awesomeness-ridiculous"/>
                    <label class="select_label" for="awesomeness-ridiculous">@ ASD</label>
                </li>

                <li class="select_option">
                    <input class="select_input" type="radio" name="awesomeness" id="awesomeness-reasonable"/>
                    <label class="select_label" for="awesomeness-reasonable">E* ERD</label>
                </li>

                <li class="select_option">
                    <input class="select_input" type="radio" name="awesomeness" id="awesomeness-lacking"/>
                    <label class="select_label" for="awesomeness-lacking">@ TRF</label>
                </li>

                <li class="select_option">
                    <input class="select_input" type="radio" name="awesomeness" id="awesomeness-awesomeless"/>
                    <label class="select_label" for="awesomeness-awesomeless">% QWE</label>
                </li>
            </ul>
            
            <label class="select_expandLabel" for="awesomeness-opener"></label>
        </li>
    </ul>
    
</form>

我尝试为打开的下拉菜单添加框阴影，但没有成功。
我还希望箭头有一个动态位置：一直在右侧并且不与 selected 选项重叠，就像现在一样，我不知道如何实现这一点一。这仅适用于 css?
我打算在 reactjs 组件中使用此表单。
这是 JSFiddle link (HTML and CSS).
你能帮帮我吗？
谢谢！

更新

期望的输出：

我希望箭头自动移动到 selected 选项的右侧。我尝试了 float: right，但没有任何结果。
也许在这里使用图像更好：content: '[=14=]3E';?

Answer 1

* {
    position: relative;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border-color: inherit;
}


form {
    width: 114px;
    height: 100%;
    padding-bottom: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30px;
}

ul {
    list-style: none;
}

.select {
    width: 225px;
    height: 40px;
    cursor: pointer;
    background-color: white;
    box-shadow: 0 2px 0 white;
    border-radius: 2px;
}

.select_expand {
    width: 0;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
}

.select_expand::after {
    content: '[=10=]3E';
    position: absolute;
    top: 50%;
    right: 25px;
    
    transform: translate(-50%, -50%) rotate(90deg) scaleY(1.75);
    color: black;
    font-size: 10px;
    pointer-events: none;
    z-index: 2;
    transition: all 250ms cubic-bezier(.4, .25, .3, 1);
          
}

.select_expand:hover::after {
    opacity: 1;
}

.select_expand:checked::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleX(-1) scaleY(1.75);
}

.select_expandLabel {
    display: block;
    width: 100%;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

.select_close {
    display: none
}

.select_closeLabel {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

.select_items {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 40px;
    
}

.select_input {
    display: none;
    
    
}

.select_label {
    transition: all 250ms cubic-bezier(.4, .25, .3, 1);
    display: block;
    height: 0;
    font-size: 18px;
    line-height: 40px;
    overflow: hidden;
    color: black;
    background-color: #fff;
    cursor: pointer;
    padding-left: 15px;
    
}

.select_label-placeholder {
    height: 40px;
    vertical-align: middle;
    position: absolute;
    top: 0;
    padding-left: 15px;
    
}

.select_expand:checked+.select_closeLabel {
    display: block;
    
}



.select_expand:checked+.select_closeLabel+.select_options .select_label:hover {
    background-color: #f7f7f7;
}

.select_expand:checked+.select_closeLabel+.select_options+.select_expandLabel {
    display: none;
}



.select_input:checked+.select_label {
    height: 40px;
    margin-top: -40px;/*changed*/
    
}

.select_expand:checked+.select_closeLabel+.select_options .select_label {
    height: 40px;
    /*box-shadow: 0 15px 30px 10px rgba(0, 0, 0, 0.1);*/
    
}
.select_options {
/*coment the below line and uncoment above for diffrent effect*/
    box-shadow: 0 15px 30px 10px rgba(0, 0, 0, 0.1);
    
}

<form>
    
    <ul class="select">
        <li>
            <input class="select_close" type="radio" name="awesomeness" id="awesomeness-close" value=""/>
            <span class="select_label select_label-placeholder">#</span>
        </li>
        
        <li class="select_items">
            <input class="select_expand" type="radio" name="awesomeness" id="awesomeness-opener"/>
            <label class="select_closeLabel" for="awesomeness-close"></label>
            
            <ul class="select_options">
                <li class="select_option">
                    <input class="select_input" type="radio" name="awesomeness" id="awesomeness-ridiculous"/>
                    <label class="select_label" for="awesomeness-ridiculous">@ ASD</label>
                </li>

                <li class="select_option">
                    <input class="select_input" type="radio" name="awesomeness" id="awesomeness-reasonable"/>
                    <label class="select_label" for="awesomeness-reasonable">E* ERD</label>
                </li>

                <li class="select_option">
                    <input class="select_input" type="radio" name="awesomeness" id="awesomeness-lacking"/>
                    <label class="select_label" for="awesomeness-lacking">@ TRF</label>
                </li>

                <li class="select_option">
                    <input class="select_input" type="radio" name="awesomeness" id="awesomeness-awesomeless"/>
                    <label class="select_label" for="awesomeness-awesomeless">% QWE</label>
                </li>
            </ul>
            
            <label class="select_expandLabel" for="awesomeness-opener"></label>
        </li>
    </ul>
    
</form>

要事第一，

首先是 ;

第二，

放置方框阴影

将代码添加到 .select_options

第三，

避免重叠

将 right 从 70px 更改为 25px（减少右侧意味着增加左侧）

自定义框阴影和动态箭头位置 select

Box-shadow and dynamic arrow position for custom select

html

css

forms

drop-down-menu

更新

要事第一，

第二，

第三，