如何用CSS3实现单选框的选定取消及切换

源自：1-5 使用radio制作导航（当前导航样式设置）

如何用CSS3实现单选框的选定取消及切换

<input type="radio" checked="checked">

<a href="#">页面1</a>

<input type="radio">

<a href="#">页面2</a>

选中input实现使input 下的a链接到相应页面

提问者：慕粉3194808 2016-09-08 11:17

个回答

慕移动9181930

2022-03-25 06:48:42

可以嵌套?只要不交叉随便用2 个 b o r d e r 也应该是 2 p x 吧，就是 m a r g i n -l e f t :7 9 0 p x 。看了您的回答我才知道 b o r d e r 也是计算在宽度内的。

0
乄小安静

2016-09-09 17:09:15
input,a{
   position:fixed;
   width:100px;
   height:50px;
   line-height:50px;
}
input{
   opacity:0;
   z-index:100;
}
a{
   background-color:blue;
   font-size:16px;
   color:#fff;
   font-weight:bold;
   text-decoration:none;
   text-align:center;
   z-index:10;
}
.a2,.a2+a{
   left:100px;
}

input:checked+a{
   background-color:red;
}

</style>
</head>
<body>
<input type="radio" name="radio-set" checked="checked" class="a1">
<a href="#">页面1</a>
<input type="radio" name="radio-set" class="a2">
<a href="#">页面2</a>

0