纯css自定义单选按钮

最新推荐文章于 2023-10-18 09:00:58 发布

wll_blogs

最新推荐文章于 2023-10-18 09:00:58 发布

阅读量400

点赞数

分类专栏： css3 文章标签：单选自定义单选按钮

本文链接：https://blog.csdn.net/wll_web/article/details/103423687

版权

css3 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

纯css自定义单选按钮

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>单选按钮</title>
  <style>
	label{position:relative;float:left;width:100px;height:100px;border:1px solid;overflow:hidden;border-radius:50%}
	input{position:absolute;left:-50px;top:-50px}
	span{position:absolute;width:100%;height:100%}
	input:checked + span{background:green}
  </style>
 </head>
 <body>
  <label>
	<input type="radio" name="aa">
	<span></span>
  </label>
  <label>
	<input type="radio" name="aa">
	<span></span>
  </label>
  <label>
	<input type="radio" name="aa">
	<span></span>
  </label>
 </body>
</html>

页面效果：
自定义单选按钮
效果比较简单，主要是实现原理，大家可以自行设置样式！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wll_blogs

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
纯css自定义单选按钮

纯css自定义单选按钮<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>单选按钮</title> <style> label{position:relative;float:left;width:100px;...
复制链接

扫一扫