html - CSS 单选框什么都不做

标签 html css radio-button

我的网页设计有问题:我希望在激活特定单选按钮时打开内容框

input#topic1:checked ~ #content1{
color:yellow;
}

但是没有任何反应。其余代码在 this 中jsfiddle。我敢打赌答案真的很简单,但我尝试了很多,但没有找到任何可以回答这个问题的问题。

谢谢你的努力

蒂姆

最佳答案

问题是 ~ 选择器与共享同一父级的兄弟一起工作,在您的情况下,父级是 body 但内容 div 在 label 内,所以你应该这样定位它:

input#topic1:checked ~ label #content1 {
  color: yellow;
}

input#topic2:checked ~ label #content2 {
  color: yellow;
}

input#topic3:checked ~ label #content3 {
  color: yellow;
}

参见 jsFiddle 分支:https://jsfiddle.net/azizn/k8gxzq56/

关于html - CSS 单选框什么都不做,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35901386/

相关文章:

javascript - 如何使用淡入效果查看archive.org上的网站?

javascript - ASP MVC 中的自定义是/否单选按钮

javascript - 使用 CSS/JS/JQuery 自定义单选按钮

javascript - 如何为放大的移动设备居中模态

html - 如何制作带有复选框的类显示 block

javascript - SVG 图案元素不会在 Chrome 中调整大小

java - 为struts radio的 "disabled"参数设置一个动态值

javascript - react : How to prompt for unsaved changes when navigating with react-router-component

html - 排列单选按钮

PHP 包含函数和 AJAX div 加载