使 materialize css 下拉列表变小

Question

我需要缩小实体化 css 的下拉菜单。

字体间距等等。我已经确定了 width: 50%;高度：50% 但这不会减小尺寸

现在：

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <title>Page Title</title>
</head>

<body>

    <div class="row">
        <div>
            <div class="col s12">

                <div class="col s6">
                    <input type="checkbox" class="filled-in single-opt" id="selectAll">
                    <label for="selectAll" id="selectAllLabel">Select all</label>
                </div>
                <div class="col s6">
                    <select id="select">
                        <option selected>Google Docs</option>
                        <option>Google Forms</option>
                        <option>Google Sheets</option>
                    </select>
                </div>
            </div>
            <script>
                $(document).ready(function() {
                    $('select').material_select();
                });
            </script>

</body>

</html>

Answer 1

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <title>Page Title</title>
</head>

<body>
  <div class="row">
    <div class="col l4">
      <input type="checkbox" class="filled-in single-opt" id="selectAll">
      <label for="selectAll" id="selectAllLabel">Select all</label>
    </div>
    <div class="col l4" ">
                <select id="select ">
                    <option selected>Google Docs</option>
                    <option>Google Forms</option>
                    <option>Google Sheets</option>
                </select>
            </div>
        </div>
        
        <script>
            $(document).ready(function() {
                $('select').material_select();
            });
        </script>
</body>
</html>

try to refer grid layout of there..

Answer 2

你可以缩放它吗？

.select-wrapper {
  transform: scale(0.7);
}

您可能需要在较小的屏幕上覆盖 ul 中的固定宽度以使其更宽。

.select-wrapper {
  transform: scale(0.7);
}

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <title>Page Title</title>
</head>

<body>

    <div class="row">
        <div>
            <div class="col s12">

                <div class="col s6">
                    <input type="checkbox" class="filled-in single-opt" id="selectAll">
                    <label for="selectAll" id="selectAllLabel">Select all</label>
                </div>
                <div class="col s6">
                    <select id="select">
                        <option selected>Google Docs</option>
                        <option>Google Forms</option>
                        <option>Google Sheets</option>
                    </select>
                </div>
            </div>
            <script>
                $(document).ready(function() {
                    $('select').material_select();
                });
            </script>

</body>

</html>

Answer 3

您需要覆盖 li 和嵌套的 a。这些是默认应用的样式：

// The <li>

.dropdown-content li {
    clear: both;
    color: rgba(0,0,0,0.87);
    cursor: pointer;
    min-height: 50px;
    line-height: 1.5rem;
    width: 100%;
    text-align: left;
}

// The nested <a>

.dropdown-content li>a, .dropdown-content li>span {
    font-size: 16px;
    color: #26a69a;
    display: block;
    line-height: 22px;
    padding: 14px 16px;
}

类似这样的东西会从 50 像素快速减少到 40 像素：

.dropdown-content li,
.dropdown-content li>a {  
    height: 40px;
    line-height: 0.9rem;
    min-height: unset;
}

最后一点 - 如果您在项目中使用 SASS，您可以在项目开始时定义下拉高度（以及框架中其他所有内容的值），而不是稍后将其覆盖。

Codepen

最后的最后笔记！

具体化 select 是一个下拉菜单，如果您想知道我为什么要谈论下拉菜单。 Materialise 隐藏了原生 select，将其替换为触发 dropdown 的文本输入。下拉菜单和 select 都会受到上述样式声明的影响。

使 materialize css 下拉列表变小

Make materilize css dropdown smaller in size

html

css

materialize