html check="checked" 无法获取 css :checked答案

【问题标题】：html checked="checked" cannot get css :checkedhtml check="checked" 无法获取 css :checked
【发布时间】：2022-07-01 23:48:40
【问题描述】：

当将 checked="checked" 应用于单选输入时，相应的 CSS 似乎不起作用 (:checked)

我错过了什么？

....

【问题讨论】：

标签： css forms radio-button

【解决方案1】：

尝试使用checked，只在前面不带冒号。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案2】：

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

在您给定的示例中，您需要定位控件的标签，而不是控件本身。为此，您可以使用Adjacent Sibling Selector 选择控件的标签，因为在您的示例中，它位于您要定位的控件之后。这看起来像：.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>

【讨论】：