选中时复选框的交叉标签答案

【问题标题】：Cross label of checkbox when checked选中时复选框的交叉标签
【发布时间】：2019-12-09 21:55:32
【问题描述】：

当我检查它时，如何使用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>

【问题讨论】：

分享你渲染的html
@Bhuwan 我添加了在浏览器中生成的 html
是任何类添加到label ui-chkbox-label 时检查。如果是，则使用.added-class-name {text-decoration: line-through;}
@Bhuwan 我不是 css 专家，请提供答案

标签： css angular checkbox primeng

【解决方案1】：

选中时带有 css 属性 text-decoration: line-through; 的样式 p-checkbox

【讨论】：

【解决方案2】：

如果您选中 Checkbox 的 documentation，您将看到它具有您可以使用的 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"
],

styles.css

.ui-label-active    {
  text-decoration: line-through;
}

【讨论】：