css - 选中时复选框的交叉标签
问题描述
检查时如何使用CSS跨越Primeng复选框的标签:
<p-checkbox value="test" label="test"> </p-checkbox>
我的复选框:
需要的复选框:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div _ngcontent-taj-c2="" class="ui-g-11" style="padding: 0%;margin: 0%">
<p-checkbox _ngcontent-taj-c2="" id="a" value="t.name" ng-reflect-value="t.name" ng-reflect-label="test">
<div class="ui-chkbox ui-widget" ng-reflect-ng-class="ui-chkbox ui-widget">
<div class="ui-helper-hidden-accessible">
<input type="checkbox" ng-reflect-ng-class="[object Object]" name="undefined" value="t.name">
</div>
<div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default" ng-reflect-klass="ui-chkbox-box ui-widget ui-cor" ng-reflect-ng-class="[object Object]">
<span class="ui-chkbox-icon ui-clickable" ng-reflect-klass="ui-chkbox-icon ui-clickable"></span>
</div>
</div>
<label class="ui-chkbox-label ng-star-inserted" ng-reflect-ng-class="[object Object]">test</label>
</p-checkbox>
</div>
解决方案
如果您查看 Checkbox 的文档,您将看到它具有ui-label-active
可以使用的类。
::ng-deep .ui-label-active {
text-decoration: line-through;
}
添加 ::ng-deep 以便能够从组件访问元素很重要。
如果你想全局改变它,你可以把它放在styles.css
. 只要确保它是在primeng样式之后导入的(在angular.json中)
"styles": [
"node_modules/primeng/resources/themes/nova-light/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"src/styles.css"
],
样式.css
.ui-label-active {
text-decoration: line-through;
}
推荐阅读
- javascript - 基本的 Chrome 扩展破坏网站 HTML
- go - 在单独的进程上运行 Goroutines(多进程)
- shell - 参数化以使用 Shell 脚本从 Oracle 表中动态生成提取文件
- excel - 根据数据透视表中的值列(计数)计算平均值
- laravel - 下表的 Laravel 关系设置
- java - maven-site 插件 3.3 java.lang.ClassNotFoundException: org.apache.maven.doxia.siterenderer.DocumentContent
- angularjs - AngularJS & NodeJS - 处理用户角色
- python - 是否可以恢复(返回旧方法)python猴子补丁
- javascript - CSS字体大小保持相同的字宽
- python - Google Cloud Dataflow - Python 将 JSON 流式传输到 PubSub - DirectRunner 和 DataflowRunner 之间的差异