如何在未选中的情况下使材料复选框填充为灰色？
要在未选中的情况下使材料复选框（Material Checkbox）填充为灰色，可以通过CSS来自定义复选框的样式。以下是一个基本的示例，展示了如何实现这一效果：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Material Checkbox Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<label class="checkbox-container">
One
<input type="checkbox" checked="unchecked">
<span class="checkmark"></span>
</label>
<label class="checkbox-container">
Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
</body>
</html>CSS部分（styles.css）
/* Hide the browser's default checkbox */
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee; /* Default color when unchecked */
}
/* On mouse-over, add a grey background color */
.checkbox-container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a blue background */
.checkbox-container input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}解释
- HTML结构：每个复选框包含在一个
label标签内，这样可以实现点击文本也能选中复选框的效果。每个复选框都有一个对应的span元素用于显示自定义的复选标记。 - CSS样式：
- 隐藏默认的复选框：通过设置
input元素的opacity为0，并将其定位到屏幕外。 - 自定义复选框样式：使用
.checkmark类来定义复选框的外观，默认情况下填充为灰色（#eee）。 - 鼠标悬停效果：当鼠标悬停在复选框上时，背景色变为浅灰色（
#ccc）。 - 选中状态：当复选框被选中时，背景色变为蓝色（
#2196F3）。 - 自定义复选标记：通过伪元素
:after来创建一个勾选标记，并在选中时显示。
- 隐藏默认的复选框：通过设置
这种方法不仅适用于材料设计风格的复选框，还可以根据需要调整颜色和其他样式，以适应不同的设计需求。
相关·内容
1回答
未选中时，我尝试用background-color: gray填充Angular Material Checkbox，选中时，用background-color: red填充。这是我已经尝试过的： mat-checkbox:not(.mat-checkbox-checked) .mat-checkbox-layout .mat-checkbox-background {mat-checkbox.mat-checkbox-checked .mat-checkbox-layout .mat-
浏览 26提问于2020-07-22得票数 1
回答已采纳
我对棱角和棱角的材料很陌生，现在我正在做一些项目的支持。有一个带有过滤器的网格和一个复选框，该复选框检查网格中的用户是活动的、非活动的还是未选中的。如果只有两个选项(活动的和非活动的)，就会更简单一些，但是，我必须为它做3项声明：
第
浏览 3提问于2018-03-15得票数 14
回答已采纳
当我在我的Galaxy S II内置浏览器或Maxthon all复选框上测试我的网站时，它显示为灰色，并且它没有被选中，默认情况下它像灰色一样被选中，但当我真正选中它时，它变成了带有选中标记的绿色。
我是否可以为所有复选框指定一个常规样式，使它们看起来像正常的复选框而不是灰色选中<
浏览 1提问于2012-12-24得票数 0
1回答
我对VBA非常陌生，我正在尝试创建一个电子表格，它使用复选框userform来填充电子表格中的表。我已经能够让表填充，但是如果某个框被意外选中而未被选中，则该表将保持填充状态。如何在未选中框后使表恢复为空白，以及如何有效地编码33个复选框以填充电子表格中的33个空格。请在我的描述中看到附在帮助上的</e
浏览 1提问于2017-11-30得票数 0
回答已采纳
1回答
使用复选框启用字段
、、、
我有一个Access数据库，其中有几个字段是与其他字段(如ID#和date )对应的复选框。当未选中相应的复选框时，我希望这些字段为灰色，并在选中时打开。Check box: StudyFields 2: StudyDateIf Me.Stu
浏览 1提问于2014-02-27得票数 0
回答已采纳
1回答
因此，如果20是文本字段列中所有条目的总和，选中复选框将导致在相应的文本字段中填充80 (100-20)。此外，每个选中的额外复选框都应该返回文本字段的新和，包括从上次检查填充的任何内容，现在，第一个计算只是为每个选中的额外复选框重新填充。因此，如果复选框的总和是20，并且我选中</e
浏览 1提问于2012-06-03得票数 0
回答已采纳
我希望只读复选框呈灰色显示，但在Windows (XP及更高版本)下显示其选中/未选中状态，但我遇到一些问题。注意-关于“只读”：似乎Delphi的TCheckBox，甚至没有只读选项，这是“伪造”的，将它放在TPanel上并禁用它...然而，问题仍然有效，如何实现灰色的只读复选框或显示其状态的非活动复选框。禁用的复选框将呈灰色
浏览 13提问于2011-03-09得票数 2
回答已采纳
3回答
按钮是未知的灰色
所有文本(textColorPrimary，textColorSecondary复选框中，当选中和未选中时，无线电按钮应该是主颜色。我如
浏览 9提问于2016-04-22得票数 0
回答已采纳
我正在练习一本书上的练习，它要求我先创建一个复选框，然后是三个无线电按钮。如果未选中复选框，则无线电按钮应显示为禁用/灰色/不可点击。但是，一旦您选中复选框，无线电按钮就应该显示为工作和可点击。我为复选框和无线电按钮创建了布局(无线电按钮是无线电组的一部分)，但我很难按照练习要求的方式连接它们。我将如何在主体
浏览 10提问于2022-04-11得票数 0
回答已采纳
正如标题所示，我使用的是顺风和表单插件。我已经设置了颜色(绿色)，边框颜色(灰色)和标签轮廓(绿色以及)通过改变文本，边框和环的颜色。(我附上了一张图片，让你知道我在说什么。)但是，我尚未了解如何在未选中复选框时更改(默认情况下)颜色、复选框颜色以及选项卡键突出显示的复选框和外部边框之间(白色)边框的颜色。有人能帮忙吗？
浏览 1提问于2022-05-26得票数 3
回答已采纳
我们正在运行Vue 2.x和vuetify，并试图弄清楚如何在表格上为查看/创建/更新用户权限的未选中复选框设置一些条件的自定义样式。角色的定义如下所示：正在添加角色A查看和角色B编辑。灰色框是未更改的权限。这是预期的工作。问题是我不知道如何将颜色/样式/类分配给未选中的框，这
浏览 0提问于2020-06-18得票数 1
我有一个复选框，可以选中也可以不选中。当复选框被选中，用户单击它时，我希望在不取消选中复选框的情况下显示一个AlertDialog (因为当您单击复选框时，它将被取消选中，因为它只是跟随状态更改)。在AlertDialog中，我想询问用户是否真的想取消检查，然后才设置未选中的复选框。
我没有提供任何更多的代码，
浏览 4提问于2014-10-17得票数 0
回答已采纳
1回答
默认情况下，布尔值在Ultragrid上的单元格中显示为复选框，这些复选框被选中(true)或未选中(false)。是否有一种方法可以简单地将其显示为文本，如“真”或“假”，0或1，甚至“是”或“否”？我只是想显示布尔值。网格上的复选框给用户的错误印象是，他们可以通过尝试选中或取消复选框来修改数据。
浏览 2提问于2015-03-03得票数 0
回答已采纳
我有一个带有参数的报告，ItemNum。我将其作为字符串，以允许空值和空值，可用值中没有任何内容，并为默认值选择空值。然后，我在WHERE中包含了SELECT语句where item_num IN (@ItemNum)的一部分。预览报告时，如果我：返回任何结果的唯一方法是输入一个有效的项
浏览 2提问于2013-10-25得票数 0
回答已采纳
我有一个绑定到IList<MyDomainObject>的UltraGrid。在MyDomainObject中有一个字段bool? isSomething。问题是，当此字段为空时，单元格中的复选框将显示为某种已填充的复选框，而不是客户希望的未选中的复选框。因此，在InitializeRow-eventhandler中，如果单元格的值<
浏览 1提问于2011-11-11得票数 1
回答已采纳
2回答
我面临的问题是，一个实现的CheckboxTreeViewer在Linux Debian上工作得很好，但在Windows下就不行了。首先我不理解“setGrayed()”的概念。是否显示元素中只有部分子元素被选中？@Override
public void checkStateChanged(final CheckState
浏览 0提问于2013-01-18得票数 5
回答已采纳
我想知道如何在未选中的情况下隐藏收据中的复选框名称。以下是我的代码：tabControl1.Visible = false;(System.Environment.NewLine) + label18.Text;
HatsCB、PartyC
浏览 2提问于2013-03-21得票数 1
回答已采纳
3回答
我在这里有一个非常混乱的情况。) { %> checked="checked" <% } %> > <td><label>Box</label></td>在portlet.xml中，默认情况下，我将box1值设置为"on“。因此，当我加载edit.jsp页面时，我看到该值是选中的。现在，我想处理一下
浏览 1提问于2012-08-05得票数 0
5回答
返回空值的未选中复选框
、、、、
我有一组复选框，当选中这些复选框时，它们将值传递为1，否则将值传递为0。但是，所发送的值不是将未选中复选框的值发送为“0”，而是“NULL”。我有下面的JS代码，它应该相应地将值设置为0/1，但是值仍然被发送为NULL。有什么可以做的，以确保在未选中复选框情况下传递
浏览 8提问于2012-12-28得票数 12
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
