【发布时间】：2022-02-08 10:43:17
【问题描述】：
我在互联网上发现了一个自定义选择，仅使用 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: '\003E';
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>我尝试为打开的下拉菜单添加框阴影，但没有成功。
另外我希望箭头具有动态位置：始终位于右侧并且不与所选选项重叠，就像现在一样，我不知道如何实现这一点。这只能使用 css 吗？
我打算在 reactjs 组件中使用此表单。
这是JSFiddle link (HTML and CSS).
你能帮帮我吗？
谢谢！
更新
所需输出：
我希望箭头自动移动到所选选项的右侧。我试过float: right，但没有任何结果。
也许在这里使用图像会更好：content: '\003E';？
【问题讨论】：
标签： html css forms drop-down-menu