Question

我期待一些明显的事情，但是实际上我已经花了很多时间试图解决这个问题。

仅选择不显示的元素。我尝试同时使用本地和CDN实体化1.0.0，但它们都不起作用。我尝试创建选择元素，但也没有使用实例化实例。检查开发人员工具，可以看到select元素和option元素。

在注释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的精选示例here

Assert.That(_response[0].Id, Is.EqualTo(_node2Id);
Assert.That(_response[1].Id, Is.EqualTo(_node1Id);
Assert.That(_response[2].Id, Is.EqualTo(_node4Id);
Assert.That(_response[3].Id, Is.EqualTo(_node3Id);

使用materialize.css时不显示选择元素

1 个答案: