0
我想顯示選擇下拉菜單作爲使用CSS的彈出菜單。我試圖顯示像這個鏈接中的選擇菜單。如何使用自定義的CSS樣式彈出選擇菜單
我嘗試了一些樣式，但它顯示爲正常的下拉菜單。
反正是有顯示選擇菜單彈出去使用A HREF和:target選項dropdown
/* Scrollbar styles */
::-webkit-scrollbar {
width: 5px;
height: 12px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 10px white;
border-radius: 2px;
}
::-webkit-scrollbar-thumb {
border-radius: 2px;
background: darkgrey;
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}
::-webkit-scrollbar-thumb:hover {
/*background: #7bac10;*/
}
/**** floating-Lable css ****/
.floating-label {
position: relative;
margin-bottom: 20px;
}
.floating-input,
.floating-select {
font-size: 14px;
padding: 4px 4px;
display: block;
width: 100%;
height: 30px;
background-color: transparent;
border: none;
border-bottom: 1px solid #757575;
}
.floating-input:focus,
.floating-select:focus {
outline: none;
border-bottom: 2px solid #5264AE;
}
label {
color: #999;
font-size: 14px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 5px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all;
}
.floating-input:focus~label,
.floating-input:not(:placeholder-shown)~label {
top: -18px;
font-size: 14px;
color: #5264AE;
}
.floating-select:focus~label,
.floating-select:not([value=""]):valid~label {
top: -18px;
font-size: 14px;
color: #5264AE;
}
/* active state */
.floating-input:focus~.bar:before,
.floating-input:focus~.bar:after,
.floating-select:focus~.bar:before,
.floating-select:focus~.bar:after {
width: 50%;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.floating-textarea {
height: 90px;
overflow-x: auto;
}
/* highlighter */
.highlight {
position: absolute;
height: 50%;
width: 100%;
top: 15%;
left: 0;
pointer-events: none;
opacity: 0.5;
}
/* active state */
.floating-input:focus~.highlight,
.floating-select:focus~.highlight {
-webkit-animation: inputHighlighter 0.3s ease;
-moz-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease;
}
/* animation */
@-webkit-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
@-moz-keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}
@keyframes inputHighlighter {
from {
background: #5264AE;
}
to {
width: 0;
background: transparent;
}
}<div class="floating-label">
<input class="floating-input" type="password" placeholder=" ">
<span class="highlight"></span>
<label>Name</label>
</div>
<div class="floating-label">
<select class="floating-select" onclick="this.setAttribute('value', this.value);" value="">
<option value=""></option>
<option value="1">Alabama</option>
<option value="2">Boston</option>
<option value="3">Ohaio</option>
<option value="4">New York</option>
<option value="5">Washington</option>
</select>
<span class="highlight"></span>
<label>Select</label>
</div>
<div class="floating-label">
<textarea class="floating-input floating-textarea" placeholder=" "></textarea>
<span class="highlight"></span>
<label>Textarea</label>
</div>
我不知道彈出下拉菜單，但可以了'modal'可能是你的解決方案？然後你可以在那裏插入一個下拉菜單。 –