In the process of creating a page, you often need to use a drop-down box component, and sometimes using the native Select tag is inconvenient because of shadow root.
Shadow DOM concept
Shadow DOM is a specification for HTML that allows browser developers to encapsulate their OWN HTML tags, CSS styles, and specific javascript code, as well as create custom level 1 tags like this. The API that creates these new tag contents is called a Web Component.
Shadow-root: indicates the root node of shadow DOM.
Shadow-tree: the shadow DOM contains a tree structure of child nodes.
Shadow-host: shadow DOM container elements, such as tags.
Shadow-dom events are all bound to the host object. Avoid events that break the main DOM.
When modifying the SELECT style, we usually don’t have access to the internal DIV style because of the shadow.
Use div to customize drop-down boxes
The SELECT tag is convenient for us to use, but there are limitations, so you can encapsulate a drop-down box.
Code examples:
<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src=".. /js/vue. Js "type="text/javascript" charset=" utF-8 "></script> <style type="text/ CSS "> /* triangle icon */.imgthree {margin-top: 17px; width: 6px; height: 6px; background: url(.. /img/shape.png) 0px 0px; background-repeat: no-repeat; float: left; Imgthree2 {animation: imgthreeanimation2 0.5s forward; } @keyframes imgthreeanimation2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); DivSelect {/*width:100%; */ height:100%; font-family: MicrosoftYaHei-Bold; font-size: 14px; font-weight: normal; font-stretch: normal; letter-spacing: 0px; color: #333333; } .divSelectinput { margin-top:2px; width:130px; height:40px; border:1px solid #131D88; cursor:pointer; } .divSelectinput .selectinfos{ width:120px; height:40px; text-align:center; line-height:40px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden ; list-style:none; float:left; } /* Drop down list */.selectList {position:absolute; margin-top: 10px; background-color:#ffffff; z-index:800; border-radius:5px; border:1px solid #E4E7ED; } .Selectlist>ul{ margin: 0; padding: 0; } .divSelect li{ width:238px; padding:0 10px; height:34px; line-height:34px; white-space:nowrap; /*background-color:#ffffff; */ white-space:nowrap; text-overflow:ellipsis; overflow:hidden ; list-style:none; cursor:pointer; } .divSelect li:hover{ color: #409EFF; font-weight: 700; background-color:#F5F7FA; } </style> <title></title> </head> <body> <div id="select_module"> <div class="divSelect"> <div class="divSelectinput"> <! <div class=" selectInfos ":title="annexTitle"> {{annexTitle}} </div> <! <div class=" imgThree "></div> </div> <div class="Selectlist" v-show="false"> <! -- dropdown list --> <ul> <li v-for="(item,index) in Files" :key="item.value" @click="changeSelect(item.filename)"> {{ item.FileName }} </li> </ul> </div> </div> </div> <script type="text/javascript"> var vm = new Vue({ El :"# select_Module ", data:{annexTitle: 'please select ', Files: [{FileName:' first: law ', value: 1,}, {FileName: 'second: economy ', value: 2,}, {FileName: 'third: politics ', value: 3,}, {FileName:' fourth: security ', value: ChangeSelect :function(FileName){this.annexTitle = FileName; } } }) window.onload = function() { var aSelect = true; / / pack up elsewhere in the drop-down list click page document. The onclick = function (e) {if (aSelect) {if (document. GetElementsByClassName (' Selectlist) [0]! = undefined) { document.getElementsByClassName('Selectlist')[0].style.display = 'none' document.getElementsByClassName('imgthree')[0].classList.remove('imgthree2'); } } aSelect = true; } if (document.getElementsByClassName('divSelectinput')[0] ! = undefined) { document.getElementsByClassName('divSelectinput')[0].onclick = function() { document.getElementsByClassName('Selectlist')[0].style.display = 'block'; document.getElementsByClassName('imgthree')[0].classList.add('imgthree2'); aSelect = false; } } } </script> </body> </html>Copy the codeEffect:
Learn together and make progress together. If there are any mistakes, please comment