使用elementplus图标自定义下拉框

最新推荐文章于 2024-08-27 10:45:28 发布

窥月

最新推荐文章于 2024-08-27 10:45:28 发布

阅读量901

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qq_32973061/article/details/130237724

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <body>
       <div class="xiala-wrapper">
       <div class="xiala-box">
       <div class="xiala-value">
       <ArrowDown style="width: 1em; height: 1em; margin-right: 8px;position: absolute;right: 5px;" />
       
       </div>
       </div>
       <div class="xialaitem-box">
       <div class="xiala-item">111</div>
       <div class="xiala-item">111</div>
       <div class="xiala-item">111</div>
       </div>
       </div>


               <style lang="less">
               .xiala-wrapper {
               width: 200px;
               margin-left: 190px;
               margin-top: 20px;

               &:hover .xialaitem-box {
               display: block;
               }

               .xiala-box {
               width: 100%;
               height: 30px;
               border: 1px solid green;
               position: relative;
               background-color: aliceblue;

               .xiala-value {
               height: 100%;
               display: flex;
               align-items: center;
               position: relative;
               }
               }

               .xialaitem-box {
               width: 100%;
               background: pink;
               margin-top: 10px;
               position: relative;
               display: none;

               .xiala-item {
               height: 30px;
               line-height: 30px;
               // width: 300px;
               padding: 0 10px;
               margin-bottom: 8px;

               &:hover {
               background-color: aquamarine;
               }

               }

               &::before {
               display: block;
               content: '';
               width: 0;
               border-width: 10px;
               border-style: solid;
               border-color: transparent transparent pink transparent;
               position: absolute;
               left: 60px;
               top: -20px;
               }
               }
               }
               </style>
   </body>
</html>