Question

我试图将卡片显示为输入类型，这是一个复选框，选择卡片时，我可以获取用户选择的卡片的详细信息，我的要求是我需要突出显示被选择的卡片用户。

例如，我需要突出显示选中其复选框的卡，如果未选中该复选框，则需要显示为卡。

        private void searchButton_Click(object sender, EventArgs e)
        {
            XmlDocument doc = new XmlDocument();
            doc.Load(Globals.xmlFilePath);

            foreach (XmlNode node in doc.DocumentElement)
                {
                    foreach (XmlNode child in node.ChildNodes)
                    {
                        filamentBox.Items.Add(child.InnerText);
                    }
                }
          }

lable+input[type=checkbox]:checked {
  //some css code
}

但是以上CSS不能正常工作，有人可以帮忙吗

Answer 1

检查输入后，输入后的div。卡应套用CSS。

您的CSS应该是这样的

input[type=checkbox]:checked + div.card{
color: red;
}

演示https://stackblitz.com/edit/angular-checked-input?file=src/app/app.component.css

Answer 2

为什么不仅仅使用通过ngClass切换的类来突出显示？请尝试此更改。

<form>
    <label for="{{i}}" *ngFor="let item of items;let i =index" (click)="item.active = !item.active;"
  [ngClass]="item.active ? 'active' : ''" style="display:block;">
    <div class="card rounded-0">
      <div class="card-header">{{item.header}}</div>
      <div class="card-body">{{item.desc}}</div>
      <div class="card-footer">{{item.footer}}</div>
    </div>
  </label>
</form>

注意：如果要将数据发送到任何API，请为使用的数组删除此active属性。下面是一个有效的示例！

Stack Blitz Demo

Answer 3

.services input[type="checkbox"] {
  display: none;
}

.services label {
  height: 100%;
  padding: 10px;
  margin: 0px;
  border-radius: 0.55rem;
}

.services input[type="checkbox"]:checked + label {
  background: #20df80;
}

.services input[type="checkbox"]:checked + label::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  border: 2px solid #1dc973;
  content: "\f00c";
  font-size: 24px;
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background: white;
}

.services img{
  max-width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container mt-5'>
  <div class="row services">
    <div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
      <div class="card shadow-soft text-center" style="width: 100%;">
        <input class="" type="checkbox" id="24 Horas" name="type[]" value="5" checked>
        <label for="24 Horas">
          <br>
          <h5 class="card-title"><strong>24 Horas</strong></h5>
          <img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
        </label>
      </div>
    </div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
      <div class="card shadow-soft text-center" style="width: 100%;">
        <input class="" type="checkbox" id="Aire acondicionado" name="type[]" value="4">
        <label for="Aire acondicionado">
          <br>
          <h5 class="card-title"><strong>Aire acondicionado</strong></h5>
          <img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
        </label>
      </div>
    </div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
      <div class="card shadow-soft text-center" style="width: 100%;">
        <input class="" type="checkbox" id="Bar" name="type[]" value="8">
        <label for="Bar">
          <br>
          <h5 class="card-title"><strong>Bar</strong></h5>
          <img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
        </label>
      </div>
    </div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-3 mb-5 d-flex justify-content-star">
      <div class="card shadow-soft text-center" style="width: 100%;">
        <input class="" type="checkbox" id="Buffet" name="type[]" value="3" checked>
        <label for="Buffet">
          <br>
          <h5 class="card-title"><strong>Buffet</strong></h5>
          <img src="https://icon-library.com/images/icon-img/icon-img-29.jpg" alt="">
        </label>
      </div>
    </div>
  </div>
</div>

单击复选框后突出显示标签项

3 个答案: