如何更改实现 css select 选项 position？

Question

the problem is when I open the Materialize CSS select the options cover the input.问题是当我打开 Materialize CSS select选项覆盖输入。 and I want options to be under the input.我希望选项在输入之下。

<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

I've prepared a solution to your question, if that's what you mean.我已经为你的问题准备了一个解决方案，如果这就是你的意思。 I achieved this with the .dropdown-content {top: -50px} CSS selector and property.我通过.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>

如何更改实现 css select 选项 position？

问题描述

1 个解决方案

解决方案1
0 2021-12-06 15:56:59

如何更改实现 css select 选项 position？

问题描述

1 个解决方案

解决方案1 0 2021-12-06 15:56:59

解决方案1
0 2021-12-06 15:56:59