html“checked=”无法获得css :checked=选中

Question

当将checked=“选中”应用于无线电输入时，相应的CSS似乎不起作用(:checked)

我遗漏了什么？

​

​

……

​

​

Answer 1

尝试只使用checked，前面没有冒号。

Answer 2

当试图覆盖其提供的样式时，Kendo控件有时会有些困难。如果我正确理解了您的问题和示例，似乎您正在尝试更改整个单选按钮控件的背景和边框属性？

在给定示例的情况下，需要针对控件的标签，而不是控件本身。为此，您可以使用邻接同胞选择器来选择控件的标签，因为在您的示例中，它位于您要针对的控件之后。在下面提供的示例中，如下所示：.k-radio:not(:checked) + label.k-radio-label。

​

input[type=radio],
input[type=checkbox],
input.k-checkbox,
input.k-radio {
  width: 16px;
  height: 16px;
}

input[type=checkbox]:not(:checked),
input[type=radio]:not(:checked),
.k-checkbox:not(:checked),
.k-radio:not(:checked)+label.k-radio-label {
  background-color: #EBF1FD;
  border-color: #B8D8F7;
  border-width: 1.5px;
}

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" />

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>


<label>Kundentyp</label>
<div class="input">
  <input type="radio" name="kndtyp" id="kndtyp0" class="k-radio ng-pristine ng-untouched ng-empty ng-invalid -ng-invalid-required" ng-disabled="info.contact.usr" ng-value="'0'" ng-model="info.contact.kndtyp" required="required" checked="checked" value="0">
  <label class="k-radio-label" for="kndtyp0">naturlich</label>
  <input type="radio" name="kndtyp" id="kndtyp1" class="k-radio ng-pristine ng-untouched ng-valid ng-empty" ng-disabled="info.contact.usr" ng-value="'1'" ng-model="info.contact.kndtyp" required="required" checked="checked" value="1">
  <label class="k-radio-label" for="kndtyp1">juristisch</label>
</div>

​