如何更改具体化 css 选择选项位置？答案

【问题标题】：How to change materialize css select option position?如何更改具体化 css 选择选项位置？
【发布时间】：2022-01-11 15:15:37
【问题描述】：

问题是当我打开 Materialize CSS select 选项覆盖输入。我希望选项位于输入下方。

<div class="input-field  ">
                                    <select>
                                        <option value="" disabled selected style="margin-top: 43px">Choose your option</option>
                                        <option value="1">Option 1</option>
                                        <option value="2">Option 2</option>
                                        <option value="3">Option 3</option>
                                    </select>
                                    <label>Sort By</label>
                                </div>

【问题讨论】：

标签： html css select materialize

【解决方案1】：

如果您是这个意思，我已经为您的问题准备了一个解决方案。我通过.dropdown-content {top: -50px} CSS 选择器和属性实现了这一点。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"
    />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        height: 100vh;
        align-items: center;
        display: flex;
        background: lightskyblue;
      }

      .container {
          width: 50%;
      }

      .dropdown-content {
          top: -50px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="card-panel">
        <div class="input-field">
          <select>
            <option value="" disabled selected>Choose your option </option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
          </select>
          <label>Sort By</label>
        </div>
      </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        var select = document.querySelectorAll("select");
        M.FormSelect.init(select);
      });
    </script>
  </body>
</html>

【讨论】：