Skip to content

fix: ad1b77dd 将Radio改为完全受控后，原来的input[type=radio]:checked的css不再生效，造成radio点击后无法显示被点击的状态。 #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Starrah wants to merge 1 commit into
base: main
Choose a base branch
from
+2 −2
Open

fix: ad1b77dd 将Radio改为完全受控后，原来的input[type=radio]:checked的css不再生效，造成radio点击后无法显示被点击的状态。 #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/themes/aquadx/components.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ body:has(.root) {
input[type=radio] {
border-color: #b3c6ff;

&:checked {
&[checked] {
background-color: #b3c6ff;
border-color: #b3c6ff;
}
Expand Down
2 changes: 1 addition & 1 deletion src/themes/dynamicLight/components.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ body:has(.root) {
input[type=radio] {
border-color: oklch(0.68 0.17 var(--hue));

&:checked {
&[checked] {
Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

将 :checked 替换为 [checked] 可能会引入以下问题：

  1. 破坏原生 radio 兼容性：对于非受控的原生 <input type="radio">，浏览器在用户交互时仅更新其 checked 属性（property），而不会同步更新 HTML 属性（attribute）。这会导致 [checked] 选择器无法匹配原生组件的选中状态。
  2. Vue 动态绑定机制：在 Vue 3 中，checked 绑定通常作为 property 处理。如果 Vue 没有将更改同步到 DOM attribute 上（通常不会同步），[checked] 选择器在动态切换时将失效。建议检查为什么 :checked 在受控模式下失效，通常只要 el.checked 属性被正确更新，该伪类就应当生效。

建议保留 :checked 并将 [checked] 作为补充以确保兼容性。此外，请检查项目中其他主题文件（如 src/themes/aquadx/components.module.scss）是否也存在类似的选择器需要同步修复。

    &:checked,
    &[checked] {

Copy link
Copy Markdown
Author

@Starrah Starrah Apr 13, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

确实漏了aquadx主题，force-push修了

background-color: oklch(0.68 0.17 var(--hue));
border-color: oklch(0.68 0.17 var(--hue));
}
Expand Down