如何使用自定义的CSS样式弹出选择菜单

Question

我想显示选择下拉菜单作为使用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>

Answer 1

的一种方式。这是纯CSS弹出窗口的一个聪明的技巧（参见here）。然而，这意味着你必须把链表放入链接，然后导致几个CSS问题。这里是我的尝试，definatelly需要一些风格固定...

$('#target2').on('change', function() { 
 
    $('#target1').val(this.value); 
 
})

/* 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; 
 
    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; 
 
    } 
 
} 
 

 
.overlay { 
 
    position: fixed; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    background: rgba(0, 0, 0, 0.7); 
 
    transition: opacity 500ms; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
} 
 
.overlay:target { 
 
    visibility: visible; 
 
    opacity: 1; 
 
} 
 

 
.popup { 
 
    margin: 70px auto; 
 
    padding: 20px; 
 
    background: #fff; 
 
    border-radius: 5px; 
 
    width: 30%; 
 
    position: relative; 
 
    transition: all 5s ease-in-out; 
 
} 
 

 
.popup h2 { 
 
    margin-top: 0; 
 
    color: #333; 
 
    font-family: Tahoma, Arial, sans-serif; 
 
} 
 
.popup .close { 
 
    position: absolute; 
 
    top: 20px; 
 
    right: 30px; 
 
    transition: all 200ms; 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
    text-decoration: none; 
 
    color: #333; 
 
} 
 
.popup .close:hover { 
 
    color: #06D85F; 
 
} 
 
.popup .content { 
 
    max-height: 30%; 
 
    overflow: auto; 
 
} 
 

 
@media screen and (max-width: 700px){ 
 
    .box{ 
 
    width: 70%; 
 
    } 
 
    .popup{ 
 
    width: 70%; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="floating-label"> 
 
    <input class="floating-input" type="password" placeholder=" "> 
 
    <span class="highlight"></span> 
 
    <label>Name</label> 
 
</div> 
 
<div class="floating-label"> 
 
    <a class="button floating-select" href="#popup1"> 
 
    <select class="floating-select" id="target1"> 
 
      <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></a> 
 
    <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> 
 

 
<div id="popup1" class="overlay"> 
 
\t <div class="popup"> 
 
\t \t <h2>Select state</h2> 
 
\t \t <a class="close" href="#">&times;</a> 
 
\t \t <div class="content"> 
 
\t \t \t Choose one of the above: 
 
     <select id="target2" 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> 
 
\t \t </div> 
 
\t </div> 
 
</div>