CSS自定义组合框问题答案

【问题标题】：CSS Custom combobox issueCSS自定义组合框问题
【发布时间】：2020-03-02 08:16:49
【问题描述】：

我需要一个自定义组合框。所以，我用ul 实现了。问题是我无法通过单击button 在顶部打开组合框列表。在显示ul 时，它会将button 移动到网页底部。

代码：

ul{
    
        width: 100px;
        background-color: rgb(224, 224, 224);
        border-radius: 4px;
        border: 1px solid black;
        padding: 0;
        margin: 0;
    }
    
    ul li{
    
        list-style: none;
        cursor: pointer;
    
        padding: 4px 10px;
    }
    
    li:hover{
    
        background-color: white;
    }
    
    div{
    
        width:  100%;
        height: 40px;
    
        background-color: bisque;
     
    }
    
    section{
    
        height: 400px;
        background-color: #525252;
    }
    
    button{
    
        width: 100px;
        height: 100%;
        margin: 0;
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <section>
            <p>Some content</p>
        </section>
        <div>
            <ul>
                <li>Parrot</li>
                <li>Dog</li>
                <li>Cat</li>
                <li>Squirrel</li>
                <li>Otter</li>
                <li>Cow</li>
                <li>Goat</li>
                <li>Finch</li>
            </ul>
            <button onclick="showPop()">Pet</button>
        </div>
    
        <script>
            let ul = document.getElementsByTagName('ul')[0]
    
            onload = function(){
    
                ul.style.display = 'none'
            }
    
            function showPop(){
    
    
                if(ul.style.display == 'none'){
                    ul.style.display = 'block'
                }else{
                    ul.style.display = 'none'
                }
            }
        </script>
    
    </body>
    </html>

在这里，我想将ul 保留在body.div 中。我只想让它像带有自定义位置的组合框一样弹出。请参考附图。

当前设计：

我希望它是这样的：

如何使用 CSS 制作它？提前谢谢大家...

【问题讨论】：

标签： html css combobox customization

【解决方案1】：

试试这个：

ul{

    width: 100px;
    background-color: rgb(224, 224, 224);
    border-radius: 4px;
    border: 1px solid black;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 40px;
    z-index: 9;

}

ul li{

    list-style: none;
    cursor: pointer;

    padding: 4px 10px;
}

li:hover{

    background-color: white;
}

div{

    width:  100%;
    height: 40px;

    background-color: bisque;
    
    position: relative;

}

section{

    height: 400px;
    background-color: #525252;
}

button{

    width: 100px;
    height: 100%;
    margin: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>
    <section>
        <p>Some content</p>
    </section>
    <div>
        <ul>
            <li>Parrot</li>
            <li>Dog</li>
            <li>Cat</li>
            <li>Squirrel</li>
            <li>Otter</li>
            <li>Cow</li>
            <li>Goat</li>
            <li>Finch</li>
        </ul>
        <button onclick="showPop()">Pet</button>
    </div>

    <script>
        let ul = document.getElementsByTagName('ul')[0]

        onload = function(){

            ul.style.display = 'none'
        }

        function showPop(){


            if(ul.style.display == 'none'){
                ul.style.display = 'block'
            }else{
                ul.style.display = 'none'
            }
        }
    </script>

</body>
</html>

【讨论】：

谢谢，它正在工作。请添加一些解释，以便我了解问题所在。
使用父div位置相对，子ul位置绝对
like div{position: relative;} ul{position: absolute;底部：40px； z-index: 9;}
@MountAin 对于这种情况，下拉菜单或按钮必须是绝对定位的，因为您绝对定位某些东西以锁定其位置，因此它永远不会像您展示的示例那样向上/向下移动.对于绝对值，您需要定义其与左/下的距离。然后，当您为 div 设置“相对”时，按钮的位置到底部，因为这是根据 html 文件的正常流程，从这个意义上说，

【解决方案2】：

尝试为您的列表使用绝对位置，并为 ul 父级设置相对位置。

ul {
  width: 100px;
  background-color: rgb(224, 224, 224);
  border-radius: 4px;
  border: 1px solid black;
  padding: 0;
  margin: 0;
  bottom: 40px;
  left: 0;
  position: absolute;
}

ul li {

  list-style: none;
  cursor: pointer;

  padding: 4px 10px;
}

li:hover {

  background-color: white;
}

div {
  width: 100%;
  height: 40px;
  position: relative;
  background-color: bisque;

}

section {

  height: 400px;
  background-color: #525252;
}

button {

  width: 100px;
  height: 100%;
  margin: 0;
}

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <section>
      <p>Some content</p>
    </section>
    <div>
      <ul>
        <li>Parrot</li>
        <li>Dog</li>
        <li>Cat</li>
        <li>Squirrel</li>
        <li>Otter</li>
        <li>Cow</li>
        <li>Goat</li>
        <li>Finch</li>
      </ul>
      <button onclick="showPop()">Pet</button>
    </div>

    <script>
      let ul = document.getElementsByTagName('ul')[0]

      onload = function() {

        ul.style.display = 'none'
      }

      function showPop() {


        if (ul.style.display == 'none') {
          ul.style.display = 'block'
        } else {
          ul.style.display = 'none'
        }
      }

    </script>

  </body>

</html>

【讨论】：

太棒了！我很高兴为您提供帮助

【解决方案3】：

我稍微修改了你的 CSS。请检查sn-p。

let ul = document.getElementsByTagName('ul')[0]

        onload = function(){

            ul.style.display = 'none'
        }

        function showPop(){


            if(ul.style.display == 'none'){
                ul.style.display = 'block'
            }else{
                ul.style.display = 'none'
            }
        }

ul{

    width: 100px;
    background-color: rgb(224, 224, 224);
    border-radius: 4px;
    border: 1px solid black;
    padding: 0;
    margin: 0;

  position: absolute;
  bottom: 40px;
}

ul li{

    list-style: none;
    cursor: pointer;

    padding: 4px 10px;
}

li:hover{

    background-color: white;
}

div{

    width:  100%;
    height: 40px;

    background-color: bisque;

}

section{

    height: 400px;
    background-color: #525252;
}

button{

    width: 100px;
    height: 100%;
    margin: 0;
	position: relative;
  display: inline-block;
}
.dropup{
position: relative;
    display: inline-block;
	}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
        <p>Some content</p>
    </section>
    <div class='dropup'>
        <ul>
            <li>Parrot</li>
            <li>Dog</li>
            <li>Cat</li>
            <li>Squirrel</li>
            <li>Otter</li>
            <li>Cow</li>
            <li>Goat</li>
            <li>Finch</li>
        </ul>
        <button onclick="showPop()">Pet</button>
    </div>

【讨论】：