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

Question

我正在尝试使用CSS将选择下拉列表显示为弹出菜单。 我试图显示此链接中的选择菜单。

我尝试了一些样式，但显示为正常下拉列表。

反正有选择菜单显示为弹出式下拉菜单

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

一种方法是使用href和:target选项。 对于纯CSS弹出式窗口来说，这是一个聪明的技巧（请参阅此处 ）。 但是，这意味着您必须将列表放在链接内，这会导致一些CSS问题。 这是我的尝试，绝对需要一些样式修复...

 $('#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"> <div class="popup"> <h2>Select state</h2> <a class="close" href="#">&times;</a> <div class="content"> 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> </div> </div> </div>