如何通过Materialize在页面中使用未设置样式的select元素？
要通过Materialize在页面中使用未设置样式的select元素，你可以按照以下步骤进行操作：
- 引入Materialize的CSS和JavaScript文件。你可以在页面的
<head>标签中添加以下代码来引入Materialize的CSS文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/materialize-css@1.0.0/dist/css/materialize.min.css">并在页面的<body>标签结束前添加以下代码来引入Materialize的JavaScript文件：
<script src="https://cdn.jsdelivr.net/npm/materialize-css@1.0.0/dist/js/materialize.min.js"></script>- 创建一个未设置样式的select元素。在HTML中，你可以使用
<select>标签来创建一个select元素，例如：
<select>
<option value="" disabled selected>选择一个选项</option>
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
</select>在这个例子中，我们创建了一个包含四个选项的select元素，并设置了一个默认的提示选项。
- 初始化select元素。在页面加载完成后，你需要通过JavaScript代码来初始化select元素，以便Materialize能够对其应用样式和功能。你可以在页面的
<script>标签中添加以下代码来初始化select元素：
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});这段代码会在页面加载完成后找到所有的select元素，并对其进行初始化。
完成以上步骤后，你就可以在页面中使用未设置样式的select元素，并通过Materialize来美化它们。Materialize会自动将select元素转换为更具交互性和美观性的下拉菜单形式。
推荐的腾讯云相关产品和产品介绍链接地址：
相关·内容
我在materialize UI framework with select2中找到了这个文档。
当我没有添加$(“select”).selet2()时，一切正常。页面如下所示：
当我添加.select2()函数时，页面无法正常工作：
select下面的行消失了。
我将代码推送到github中，下面是存储库：
希望有人的支持，非常感谢；
浏览 19提问于2017-07-07得票数 1
我正在做一个需要使用的项目。
最初，当我使用bootstrap时，我可以创建一个可编辑的下拉/选择框。下面是一个示例代码：
在materialize中，您可以使用以下命令创建下拉列表：
<div class="input-field col s12">
<select multiple>
<option value="" disabled selected>Choose your option</option>
<option value="1">
浏览 0提问于2017-10-31得票数 0
我有一个带有Materialize的页面(ASP.NET/C#)，一切正常。我需要添加一个下拉式组合框控件，没有与物化样式，我只想要一个普通的，没有样式的香草组合框。使用"browser-default“类仍然有许多应用于它的物化样式元素。有没有一种方法可以完全忽略组件上materialize的任何样式。
<select id="myBareComponent" class="browser-default">
<option value="One">One</option>
<optio
浏览 11提问于2020-03-04得票数 1
下面是引入了常规物化select和角度物化组件的：
@Component({
selector: 'my-app',
styles: [`
.select-wrapper {
background-color: red;
}
`],
template: `
<div class="row">
<div class="col s6">
<select materialize="material_select">
&l
浏览 47提问于2017-07-23得票数 0
回答已采纳
1回答
如何解决物化模式问题
、、、
我在我们的项目中使用materialize.css，我使用物化弹出窗口。我的简单要求是弹出应该是一个垂直的正文中心。是的，我试过了，它也工作得很好，但面临着一些问题。在弹出的内容中显示模糊，不知道为什么，如果有，请分享您的反馈。
浏览 1提问于2020-06-15得票数 1
1回答
我正在尝试对css创建的复选框的输入字段进行样式化。我使用的是角2物化指令。这就是我的html看起来的样子：
<div class="input-field col s12">
<select id="property-selector" materialize="material_select" name="propertySelector">
<option class="property-option">Address 1, 1000AA Amsterdam,
浏览 1提问于2016-10-07得票数 0
我有几个CSS框架存储在我的项目的assets文件夹中，之前我把它们放在static文件夹中，一切都很好。但是，我决定将一些文件从静态文件夹切换到assets文件夹，并且我在链接样式表时遇到了问题。
在assets文件夹中，有一个名为"css“的文件夹，我在其中存储了所有的框架。
我的目标是在components文件夹中将框架链接到依赖于它们的组件。如前所述，样式表位于静态文件夹中，并且工作正常。
但是，到目前为止，我所做的每一次尝试都会出现"/* style not found */“页面。图像也在assets文件夹中，位于名为"img“的文件夹中，工作正常。
我尝试
浏览 1提问于2019-03-28得票数 2
2回答
我正在将我的HTML页面转换成AMP页面。我见过测试url 。此页面由AMP验证。
帮助屏幕截图：
但当我使用外部Css时。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
那它就会失败。
屏幕截图寻求帮助.
那么我如何访问物化css文件。因为我在我的网站上使用的是物化Ui框架。
但我也读过
<style amp-custom> </style
浏览 4提问于2017-02-13得票数 3
1回答
当使用“静态”元素(即包含在HTML中或以前插入到DOM中)初始化物化时，一切都按预期工作：
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/
浏览 2提问于2020-11-02得票数 1
回答已采纳
我浏览了Select2 ()的文档并搜索了他们的论坛，但没有找到答案--可能是因为我的经验有限，所以我甚至没有问正确的问题：
我正在使用物化css ()作为我的网站的样式。如何使我的Select2下拉列表与页面其他部分的外观相匹配？
以下是我的HTML代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-
浏览 1提问于2020-03-04得票数 0
回答已采纳
2回答
我有一个使用Materialize CSS的页面。它几乎不使用框架中的任何东西，只使用容器、基本字体样式和以下内容：
<div id="benefits">
<div class="row">
<div class="col s12 m12 l6">
<h2>Neat colors</h2>
<div>...</div>
</div>
</div>
</div>
对于Sass (不
浏览 28提问于2021-06-10得票数 0
2回答
动态创建选择输入字段
、、、、
在使用jQuery动态创建物化选择输入字段时，我遇到了问题。我的目标是在单击按钮时添加一个带有select字段的div。以下是我的当前代码：
$(document).ready(function(){
$('select').formSelect();
});
$("#addSelect").click(function(){
$("#addSelect").addClass("disabled");
$("#addSelect").hide();
$("#newCont
浏览 0提问于2018-06-25得票数 1
回答已采纳
因此，我使用Materialziecss和第三方库来输入标记。
材料化：
物化标记库：
现在，根据标记输入库的文档，如果您愿意包含自动完成的提前输入功能，则需要包含一个typeahead.js库。
他们推荐的是
我试图申请图书馆，但我无法使它发挥作用。我的代码如下
$(document).ready(function() {
$('select').material_select();
$('#en_tags').materialtags({
浏览 2提问于2015-12-29得票数 2
我正在开发一个使用Laravel + Svelte + materializecss的产品。
我使用Svelte组件作为自定义标记，使用svelte: options。
示例：<svelte: options tag = "custom-tag" />
如果试图在此组件中加载materializecss，则必须每次在组件中运行import。父HTML调用materializecss。
为什么会这样呢？如果你能告诉我，我会很感激的。
index.blade.php
<html>
<head>
<!-- ↓ materializec
浏览 7提问于2020-10-21得票数 0
回答已采纳
2回答
我想提醒物品的名称，我将点击其位置出价按钮，但我的代码似乎只提醒笔记本电脑。谁能告诉我如何通过php脚本获得动态生成的div值。下面是页面的代码。我想要提醒我点击其位置出价的项目名称。因为页面是动态生成的，它从包含商品详细信息的数据库中获取商品详细信息。
<?php
$con = mysqli_connect("localhost","root","*****","bidding") or
die(mysqli_error($con));
$select_query = "select * from ite
浏览 0提问于2017-11-13得票数 0
1回答
我正在创建一个带有物化的react.js应用程序，但是当我试图输入一个select时，它直到刷新页面才会呈现。
Index.html (简称)
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-
浏览 0提问于2018-02-18得票数 0
2回答
我使用Materialize modal，我有一个表单和两个按钮，"Validate“和"Cancel”。当我点击“验证”时，我希望在页面的主体中生成一个div，但是div很快就会出现和消失。
接下来，我使用jquery编写代码：
$('#validation-btn').click(function(){
$("#liste-questions").append("<div>hello world</div>");
});
HTML页面中的代码：
<body>
<div cla
浏览 0提问于2017-05-23得票数 1
1回答
我试图从Jquery中向html中的select元素添加一个选项。我使用一个表单来提交要添加到select元素中的类别的名称。新类别选项在检查代码时显示，但是它不在文档中显示。
$(document).ready(function () {
// initialization
$('select').formSelect();
$('#myForm').submit(function (e) {
let category = $('#in').val();
$('#selection').append(`&
浏览 0提问于2018-05-08得票数 1
回答已采纳
1回答
我使用的是MaterializeCSS 0.9.8 (带有角物化指令)和角1.5.0
我的目标是在一个表中生成一些行，这些行中的每个行都需要一个具有基本相同的自动完成数据(用户列表)的自动完成，但是我无法让这些行工作.
这是我到目前为止得到的代码，我已经做了一个小例子来说明我的问题。
<!DOCTYPE html>
<html lang="en" ng-app="myApp" class="no-js">
<head>
<!--Import Google Icon Font-->
浏览 1提问于2017-08-01得票数 1
回答已采纳
3回答
我正在使用基本的物化css，由于某些原因，即使我直接从materializecss.com网站复制它，我的选择选项只是显示标签，没有其他东西。
编辑添加了index.hjs页面，以供脚本参考。
在我的index.hjs中，这里是我为物化css导入的所有内容：
<!DOCTYPE html>
<html>
<head>
<title>{{ title }}</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
浏览 4提问于2017-09-21得票数 1
回答已采纳
2回答
材质+角度6如何配置？
、、、
我在一般的角度上是新的，我尝试使用和角度6，我使用CLI来创建我的组件。
我读过关于如何在角2中这样做的材料，但是角6似乎是不同的，例如没有角-cli.json文件。
我怎样才能使物料在六角形运行呢？
用于安装materializecss：npm i materialize-css@next的命令
angular.json尝试修改：
"styles": [
"./node_modules/materialize-css/dist/css/materialize.css",
"s
浏览 1提问于2018-08-02得票数 3
我正在尝试通过包含materialize select的jest测试我的vuejs组件。在执行组件测试时，我在materialize.js中得到以下错误：
TypeError: Cannot set property 'tabIndex' of null at Dropdown._makeDropdownFocusable
如何修复这个错误？
浏览 0提问于2019-01-24得票数 7
3回答
有人知道如何让Modal适合它的内容吗？当我放置一个宽度小于模式宽度的图像时，它周围有很多未使用的空间。下面是codepen
<html>
<head>
<title>Something gym related</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="ht
浏览 0提问于2017-07-25得票数 0
9回答
我试图在我的页面上添加materialize单选按钮，但由于某种原因，实际的单选按钮没有显示，这是一个sharepoint站点，在那里我链接到materialize js和css文件，其他文本输入字段正在工作，我只是从materialize文档中复制并粘贴了示例。在寻找问题的答案时，我注意到在google的一个文档页面上也发生了同样的问题。我附上了一个截图，可以在这里找到。你知道怎么才能让这些无线电图标出现吗？
编辑:这是我的示例代码
<html>
<head>
<script src="https://ajax.googleapis.
浏览 1提问于2018-04-10得票数 3
是否可以将框架的css类限制为某些部分？
我希望将materialize框架中的一些组件包含到使用完全相同类名的现有wordpress主题中。通过整个物化css文件和重命名每个文件将是太多的工作，无论如何也不会工作，因为我还需要像table这样的类。
我考虑过使用iframe，但当涉及到响应时，它们是一个真正的痛苦。
浏览 5提问于2018-08-30得票数 3
1回答
我想将materialize可折叠主体填充更改为3px。它开始工作，但如果你打开，关闭，然后重新打开可折叠填充将重置为默认值，将不再是3px。 你能告诉我如何预防这种情况吗？ 下面是一个显示问题的代码：https://codepen.io/jbeausej/pen/yLyrOow 谢谢! 下面是我的代码： <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devi
浏览 22提问于2020-01-27得票数 0
回答已采纳
2回答
我尝试了How to change default body color of materialize datetimepicker?中提出的解决方案，但这些解决方案都不起作用了，可能是因为更新到了1.0.0 (这个问题是从2018年开始的)，也许类名现在不同了，但我没有找到任何东西。这是我的代码片段。 .picker__box{
background-color: #CCC !important;
}
.picker__date-display, .picker__weekday-display{
background-color: #CCC !important;
浏览 42提问于2020-03-31得票数 0
回答已采纳
1回答
在Rails4.2中，我希望从使用"Materialize“来样式化视图过渡到使用"Material Design Lite”。
物化样式要求我在application.scss中有@import 'materialize';，而MDL样式要求我在同一文件中有@import 'material';。
我的问题是，当我导入Materialize样式时，它会破坏MDL样式。如果我删除Materialize import语句，则MDL样式可以工作，但是任何未转换为MDL样式的页面都将完全取消样式。
这个应用程序太大了，不能一下子过渡到MDL。我想有一些
浏览 19提问于2017-03-03得票数 0
查看此处： (必须使用火狐或Opera才能查看)
当您单击select时，下拉菜单的样式是匹配的，但是如果您开始在文本框中输入数据列表中的术语，则出现的建议不会样式，因此它与样式的其余部分不匹配。
是否可以设置下拉菜单的样式？
* {margin:0; padding:0; font-family: arial, sans-serif; font-size: 40px; font-weight: bold; color: #444;}
body {height:100%; background:#F4F3EF;}
.select select, .input input {backgrou
浏览 4提问于2012-04-08得票数 31
是否有materialize-css的"webcomponent“版本？ 有没有人尝试过使用materialize-css来构建Has组件？我能够获得样式，但还没有想出如何让底层的javascript/图标出现： import {html, LitElement, css, unsafeCSS} from 'lit-element';
// import 'materialize-css';
import MaterializeCSS from 'materialize-css/dist/css/materialize.min.css'
浏览 7提问于2019-08-31得票数 2
3回答
我知道样式是按级联顺序应用的，但从我使用物化框架开始，我在级联样式方面遇到了一些问题。样式表是在我在html页面中引用它们时加载的：
materialize.css
login.css
当我查看如何在DOM中应用它们时，我发现它们不是按加载的顺序应用的。
物化(第2587项)
登录
物化(第6701项)
我假设这种行为是由Javascript/BrowserEngine的事件驱动、非阻塞模型引起的。
但我需要有一种方法来可靠地覆盖有选择地实现css。我很肯定有。但是怎么做呢？
浏览 1提问于2015-12-28得票数 0
回答已采纳
我想清除一个输入字段
$('#test').val('');
字段本身被清除，但是来自Materialize.css的高亮显示仍然是填充的。
用..。
$('#form')[0].reset();
..。对我来说没有选择。我只想重置一个输入字段，而不是整个表单。
有人想到办法了吗？
谢谢
//编辑
找到了解决办法：
$('#test').val('').removeClass('valid');
M.updateTextFields();
浏览 0提问于2018-07-02得票数 0
回答已采纳
2回答
我使用的是Jquery Mobile。当我创建一个输入文本时，例如select box，它用一些HTML对它进行包装。其中一行是：
<span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span>
在我们的项目中，我们有很多对这些类的覆盖，特别是ui-icon
.ui-icon {
background-size: 85px 700px !important;
}
所以我得到了一个带有这些参数的页面，我的所有页面都因此而变得混乱。
在所有项目中更改样式都是一项繁重的工作，我如何才能强
浏览 7提问于2013-09-03得票数 4
1回答
我正在使用物化来完成我正在开发的Google上的样式和网格，但我无法让网格在移动设备上工作。
我确实在我的部分中把建议的代码放在了物化文档上，并且正如我在这个问题上所建议的那样，，但是它并不适合我。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
我做错什么了？我的完整HTML是
<!DOCTYPE html>
<html>
<head>
<title>Getting started</title&
浏览 2提问于2020-03-27得票数 0
回答已采纳
2回答
我想问一下，是否有一步一步地使用或配置使用Aurelia的materializecss。目前，我能够运行我的Aurelia应用程序，在教程中，我的index.html看起来如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="jspm_packages/github/dogfalo/materialize@0.97.0/dist/css/materialize.css" rel="styleshee
浏览 0提问于2015-08-28得票数 3
回答已采纳
我正在研究css的物化并使用这个库。
我编译了sass，并在我的html中包含了css文件，但是当我尝试做一些定制的css时，我发现了奇怪的事情。
当我检查元素时，我看到chrome正在从.scss文件中获取css，而我仍然没有在html中使用这些文件。
当时我只包含两个css文件。
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection" />
<link type="
浏览 1提问于2018-08-04得票数 0
回答已采纳
1回答
任何人都知道如何在Materialize Datepicker中调整大小和隐藏overflow-y。我使用的是带有MVC 4.0的ASP。看起来正在获取父div设置。
谢谢
编辑:我将datepicker输入移出了视图中的任何div，但没有成功，我正在尝试找到month days容器类来进行测试。
浏览 17提问于2017-06-20得票数 0
我只想用以前创建的对象(仪器)中的值创建一个下拉菜单。在本例中，对象位于Instrument类中。我读过所有其他关于Django中的dropdowns的帖子，但大多数都是关于创建一个新对象或具有固定选择的东西。虽然我想从可用的对象中选择一个，然后进一步处理它。我不想创建新的对象，我需要动态的选择。
forms.py
# forms.py
from django import forms
from .models import Instrument
from users.models import CustomUser
class CreateForm(forms.Form):
i
浏览 15提问于2019-08-15得票数 0
回答已采纳
2回答
我正在尝试创建一个导航菜单在顶部，在我的全屏背景图像的顶部，问题是我在下面做的方式，会导致100vh的部分下移，所以图片的底部将不可见，我试图在<div class="section valign-wrapper" id="home">中添加导航，但这导致导航垂直对齐在页面上，所以它不再在顶部，我的问题是:我如何才能把导航放在页面的顶部，而不是向下移动该部分？
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize
浏览 0提问于2018-04-02得票数 0
1回答
如何使用XSLT解析XML文档？也许我错了，是否可以使用XSLT解析XML文档？
下面是XML文档：
<?xml version="1.0" encoding="utf-8" ?>
<cart>
<item id="1">
<name>Tyres</name>
<cost>20</cost>
</item>
<item id="2">
<name>Front Glass<
浏览 0提问于2012-06-12得票数 0
在我的签出html页面中，有一个专门用于签出产品的部分：
<div class="col s12 m12 l6">
<div id="checkout-products-section">
</div>
<div id="paypal-button-container"></div>
</div>
在其中，我使用js脚本注入内容，该脚本基于本地存储中可用的数据构建内容：
$(document).ready(function () {
浏览 3提问于2020-12-31得票数 0
回答已采纳
我在使用第三方essentialobjects的时候使用materialize css，grid.My的问题是在渲染网格时复选框不被渲染。
我在materialize css中找到了一些与复选框问题相关的链接。
我只想在网格上应用修复，而不是整个页面的.Please，请给我你的意见
enter code here
<div class="row">
<div class="col s12 m12 l12" >
浏览 17提问于2017-08-02得票数 1
回答已采纳
5回答
我正在尝试将以下元素的输入颜色更改为白色：
<textarea name="message" id="textarea1" class="materialize-textarea" required="" style="height: 45px;"></textarea>
将color: white !important;添加到id、类或文本区域不起作用，在开发人员工具中，当我将规则添加到：
input:not([type]), input[type=text]:not(.browser-d
浏览 1提问于2018-04-08得票数 1
3回答
在td内截断跨度
、、
我使用Materialize类为用户创建一个“照片占位符”，其中包含用户姓名的第一个字母。 我在处理<td>标记中的长名称时遇到了问题。我不想在名字太长的时候破坏它。正因为如此，我尝试将class="truncate"应用于包含该名称的垃圾邮件，但它无法截断。 我该如何解决这个问题呢？ main {
padding: 16px;
}
table {
table-layout: fixed;
}
td {
width: 33.33%;
}
.photo-placeholder {
width: 40px;
height: 40px;
浏览 14提问于2019-05-29得票数 0
回答已采纳
document.addEventListener("DOMContentLoaded", function () {
const selects = document.querySelector("select");
const instances = M.FormSelect.init(selects, {});
const selectOption = document.querySelector("#option-select");
selectOption.addEventListener("cha
浏览 5提问于2022-11-07得票数 1
回答已采纳
1回答
我在一个项目上使用物化，我必须使用链接来实现加载。因此，在我的项目标题中，我有：
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.c
浏览 5提问于2020-04-02得票数 0
2回答
获得不可见元素高度
、、、
因此，我需要找到一个元素的高度，以正确地将其转换为。我的问题是，这个元素最初没有高度，因为它会扰乱我的网站布局。
此值根据用于查看站点的设备进行更改，这是“我的文本框”的高度。
在加载页面时，不需要隐藏文本，然后获得高度并使用javascript隐藏，这可能是可能的，但我认为这根本不是一个理想的解决方案。
我的目标是，无论页面是图像还是文本显示，在这两种情况下，一切都应该是垂直和水平中心。
document.getElementById("intro-img").onclick = function() {
$("#intro-img").toggleC
浏览 7提问于2016-04-30得票数 0
回答已采纳
3回答
我正在使用Materialize在我的html中创建一个选择表单。如何使用javascript/jquery中的变量存储此表单的输入值？
表单的html代码是：
<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</opti
浏览 1提问于2017-09-19得票数 2
我正在试着简化我的页面。目前，我有几个CSS文件包括在内。我想通过从一个大的CSS文件中获取一些使用的样式来消除一些CSS包含。
找出使用特定CSS文件中的哪些样式的最佳方法是什么？
浏览 1提问于2012-04-29得票数 3
回答已采纳
3回答
我创建了一个angular4项目，其中包含了angular。我想去图书馆。所以我用
npm install materialize-css@next --save
所以这个安装了
"materialize-css": "^1.0.0-alpha.2",
然后在角-cli.json中添加了对css和js文件的引用。
"styles": [
"styles.css",
"../node_modules/materialize-css/dist/css/materialize.css"
],
"scr
浏览 1提问于2017-12-28得票数 10
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
