使用 materialize.css 时 select 元素不出现

Question

我期待一些显而易见的事情，但实际上我已经花了很多时间试图弄清楚这一点。

只有 select 个元素没有显示。我试过同时使用本地和 CDN materialize 1.0.0，它们都不起作用。我也尝试过创建 select 元素而不使用 materialize 中的示例。检查开发人员工具，select 元素和选项元素可见。

注释掉 materialize.css 时，将显示 select 元素，它会成功获取所有响应并运行 materialize.js 文件。

这是使用materialize.css时的元素样式。

element.style {
}
select {
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    padding: 5px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    height: 3rem;
}
select {
    display: none;
}

button, input, optgroup, select, textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
button, select {
    text-transform: none;
}
button, input, optgroup, select, textarea {
    font-family: sans-serif; OVERRIDEN
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit; OVERRIDEN
    box-sizing: inherit;
}
user agent stylesheet
select:not(:-internal-list-box) {
    overflow: visible !important;
}
user agent stylesheet
select {
    border-radius: 0px; OVERRIDEN
    border-color: rgb(169, 169, 169); OVERRIDEN
}
user agent stylesheet
select {
    -webkit-appearance: menulist;
    box-sizing: border-box; OVERRIDEN
    align-items: center;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    background-color: white; OVERRIDEN
    cursor: default;
    border-width: 1px; OVERRIDEN
    border-style: solid; OVERRIDEN
    border-color: initial; OVERRIDEN
    border-image: initial; OVERRIDEN
}
user agent stylesheet
select {
    border-radius: 5px; OVERRIDEN
}
user agent stylesheet
input, textarea, select, button {
    text-rendering: auto;
    color: initial; OVERRIDEN
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none; OVERRIDEN
    text-indent: 0px;
    text-shadow: none;
    display: inline-block; OVERRIDEN
    text-align: start;
    margin: 0em; OVERRIDEN
    font: 400 13.3333px Arial;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb !important;
}

这是我的index.html。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Skater-demo</title>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css CDN-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Import materialize.css LOCAL
    <link type="text/css" rel="stylesheet" href="./materialize/css/materialize.css">   
    -->
    <link type="text/css" rel="stylesheet" href="index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

    <div class="input-field col s12">
        <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>Materialize Select</label>
    </div>

    <select>
        <option>I will not be displayed</option>
    </select>

    <script type="text/javascript" src="materialize/js/materialize.js"></script>
</body>

Answer 1

我已经用 materialize.css 创建了 select 个示例，查看 here

<html>

<head>
  <title>The Materialize Selects Example</title>
  <meta name="viewport" content="width = device-width, initial-scale = 1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
  </script>

  <script>
    $(document).ready(function() {
      $('select').material_select();
    });
  </script>
</head>

<body class="container">
  <div class="row">
    <form class="col s12">
      <div class="row">
        <label>Materialize Select</label>
        <select>
          <option value="" disabled selected>Select Fruit</option>
          <option value="1">Mango</option>
          <option value="2">Orange</option>
          <option value="3">Apple</option>
        </select>
      </div>

      <div class="row">
        <label>Materialize Multi Select</label>
        <select multiple>
          <option value="" disabled selected>Select Fruit</option>
          <option value="1">Mango</option>
          <option value="2">Orange</option>
          <option value="3">Apple</option>
        </select>
      </div>

      <div class="row">
        <label>Select with Optgroup</label>
        <select>
          <optgroup label="Fruits">
            <option value="1">Mango</option>
            <option value="2">Orange</option>
            <option value="3">Apple</option>
          </optgroup>

          <optgroup label="Vegs">
            <option value="4">Brinjal</option>
            <option value="5">Potato</option>
            <option value="6">Tomato</option>
          </optgroup>
        </select>
      </div>

      <div class="row">
        <label>Select with images</label>
        <select class="icons">
          <option value="" disabled selected>Select Technology</option>
          <option value="1" data-icon="/html5/images/html5-mini-logo.jpg" class="circle">
            HTML</option>
          <option value="2">JavaScript</option>
          <option value="3">CSS</option>
        </select>
      </div>

      <div class="row">
        <label>Browser default Select</label>
        <select class="browser-default">
          <option value="" disabled selected>Select Fruit</option>
          <option value="1">Mango</option>
          <option value="2">Orange</option>
          <option value="3">Apple</option>
        </select>
      </div>

      <div class="row">
        <label>Disabled Materialize Select</label>
        <label>Disabled Materialize Select</label>
        <select disabled>
          <option value="" disabled selected>Select Fruit</option>
          <option value="1">Mango</option>
          <option value="2">Orange</option>
          <option value="3">Apple</option>
        </select>
      </div>

      <div class="row">
        <label>Disabled Browser default Select</label>
        <select class="browser-default" disabled>
          <option value="" disabled selected>Select Fruit</option>
          <option value="1">Mango</option>
          <option value="2">Orange</option>
          <option value="3">Apple</option>
        </select>
      </div>
    </form>
  </div>
</body>

</html>

使用 materialize.css 时 select 元素不出现

when using materialize.css select element does not appear

css

materialize