- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我在我的 Angular 2 应用程序中使用了 Angular Material 元素,在我使用 md-checkboxes 的一个部分中,我注意到在 Chrome 中,md-checkboxes 的 UI 以及看起来像是默认浏览器复选框正在显示。如何禁止显示默认的浏览器 UI 复选框?
<md-checkbox class="request-option" [checked]="hasBeenRequested()"
(change)="onOptionSelected($event, 'ct')">Consulting
</md-checkbox>
以下是根据浏览器应用的样式:
element.style {
}
default-theme.css:205
.chart-content .scroll-panel * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
<style>…</style>
.mat-checkbox-input {
bottom: 0;
left: 50%;
}
<style>…</style>
.cdk-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
text-transform: none;
width: 1px;
}
default-theme.css:195
.chart-content * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
default-theme.css:413
input {
font-size: 14px;
padding: 8px;
outline: none;
}
user agent stylesheet
input[type="checkbox" i] {
-webkit-appearance: checkbox;
box-sizing: border-box;
}
user agent stylesheet
input[type="radio" i], input[type="checkbox" i] {
background-color: initial;
cursor: default;
margin: 3px 0.5ex;
padding: initial;
border: initial;
}
user agent stylesheet
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
user agent stylesheet
input, textarea, select, button {
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
margin: 0em;
font: 400 11px system-ui;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb;
}
我的“计算”选项卡显示了这一点:
background-color: rgba(0, 0, 0, 0);
border-bottom-color: rgb(0, 0, 0);
border-bottom-style: none;
border-bottom-width: 0px;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(0, 0, 0);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(0, 0, 0);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(0, 0, 0);
border-top-style: none;
border-top-width: 0px;
bottom: 0px;
box-sizing: border-box;
clip: rect(0px 0px 0px 0px);
color: rgb(0, 0, 0);
cursor: default;
display: block;
inline-blockinput, textarea, select, buttonuser agent stylesheet
font-family: system-ui;
font-size: 14px;
font-stretch: 100%;
font-style: normal;
font-variant-caps: normal;
font-variant-east-asian: normal;
font-variant-ligatures: normal;
font-variant-numeric: normal;
font-weight: 400;
height: 1px;
left: 10px;
letter-spacing: normal;
line-height: normal;
margin-bottom: -1px;
margin-left: -1px;
margin-right: -1px;
margin-top: -1px;
outline-color: rgb(0, 0, 0);
outline-style: none;
outline-width: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: start;
text-indent: 0px;
text-rendering: auto;
text-shadow: none;
text-transform: none;
white-space: nowrap;
width: 1px;
word-spacing: 0px;
writing-mode: horizontal-tb;
-webkit-appearance: checkbox;
-webkit-box-direction: normal;
-webkit-rtl-ordering: logical;
-webkit-border-image: none;
最佳答案
cdk-visually-hidden
类被分配给 Angular Material 复选框内的 HTML 输入元素,并且应该使其不可见。如果您找不到其他方法来阻止元素显示,您可以将以下样式添加到应用程序的全局 CSS 文件中:
.cdk-visually-hidden
{
visibility: hidden;
}
关于javascript - 除了 Angular-Material md-checkboxes 之外,默认的浏览器复选框也出现了,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48119601/
我想在 md-toolbar 中使用 mf-tabs,我使用 Sithdown 在 https://github.com/angular/material/issues/1076 中提供的解决方案 它
我是新手,我设法用服务提供的数据实现了我的 md-table。现在我正在尝试实现过滤器、排序和分页功能,但我认为我做错了什么。 这是我的组件: import { Component, OnInit,
我必须打开一个 md-dialog,其中包含一个带有两个选项卡的 md-tab-group。 md-dialog 可以从两个按钮打开,这两个按钮应该打开相应的选项卡。打开 md-dialog 的模板:
我正在尝试做这样的事情: {{item}}
我正在尝试使用 md-datepicker 遍历一个月的时间间隔,因此我创建了这个 codepen 示例以便更好地演示: http://codepen.io/anon/pen/ygBGOg 当单击“P
这是关于 Codepen 的例子. 我正在设置 md-row-height="30px" 然后计算 md-rowspan 使其等于元素数 + 1。(头部加一) {{ t
当我频繁切换 md-tabs 时,Md-tabs 切换正确但多个 md-tab-item 元素同时具有“md-active”类,所以我看不到选项卡的内容是事件的,因为它与其右侧选项卡的内容重叠。 据我
我想将操作放在同一数据行上,我有两个操作,为此我使用按钮和图标作为下面的代码。 {{item.codigo}} {{it
在我的对象列表中,我可以激活/非事件对象。因此,一个图标执行事件操作,另一个图标执行非事件操作,并且两者都在同一个 md-list 中。 This is what i'm tring to do 代码
如前所述 Angular-Material md-autocomplete's documentation : The md-autocomplete uses the the md-virtual-
我也在使用 Angular 1 和 Angular Material 。我想在 ng-repeat 中使用 md-subheader 和多个 md-virtual-repeat-container。您
我正在使用 Angular Material 。 当我创建自己的指令并将其添加到 md-tab-label 时,例如 Label 然后自定义指令也应用于一些“md-dummy-tab”。 但是
我在我的项目中使用 Angular Material 有一段时间了。在使用 md-select 时,我遇到了一个问题,即出现重复的 md-option 值错误。 我知道 md-options 采用唯一
我正在根据单选按钮选择设置自动完成验证 md-require-match = true/false。 默认验证是 md-require-match = true 这样用户应该从自动完成列表中选择一个项
这个问题在这里已经有了答案: Changing capitalization of filenames in Git (11 个答案) 关闭 3 年前。 我使用“readme.md”创建了我的存储库
Github有办法吗?在例如 README.md 中包含 md 文件? # Headline Text [include](File:load_another_md_file_here.md) 它不应
我正在使用 AngularJs 开发这个动态过滤系统,并试图找出如何将 color 和 size 选项转换为在两个下拉列表中(每个类别一个)。 我尝试了以下代码,该代码成功添加了下拉列表以及选择框中的
var app = angular.module('tabsDemo', ['ngMaterial']); app.controller('TabsController',tabsController
在 md-tab 指令内嵌套 md-select 和搜索输入时遇到问题。 有两个问题: 选择框展开后,必须向上滚动才能查看搜索输入 搜索输入实际上不接受任何文本 我做了一个codepen为了更好地说明
我正在尝试处理这个片段,其中自动完成功能嵌入在芯片中。但从自动完成中选择的项目不会转换为筹码。 自动完成的数据采用以下方式:{name:"John Doe", id:"1"} 哪里错了,请指教。 问候
我是一名优秀的程序员,十分优秀!