如何更改 materialize css select 选项位置？

Question

问题是当我打开 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>

Answer 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>

如何更改 materialize css select 选项位置？

How to change materialize css select option position?

html

css

select

materialize