关于input[type=radio]的样式问题

hsc958 2017-11-02 03:07:56
如题如图,这种radio的单选框样式如何写,求大神代码
...全文
267 3 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
一本正经的猪 2017-11-03
  • 打赏
  • 举报
回复
我做过一个类似的,我改变的是复选框的样式,可以参考一下 http://blog.csdn.net/zzzzzxping/article/details/62046668
天际的海浪 2017-11-02
  • 打赏
  • 举报
回复

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<title> 页面名称 </title>
<style type="text/css">
input[type=radio] {
	display: none;
}
input[type=radio]+span {
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	text-align: center;
	font-size: 16px;
	border: 1px solid #999;
	background-color: #fff;
	color: #fff;
	cursor: pointer;
}
input[type=radio]:checked+span {
	border: 1px solid #9cf;
	background-color: #06f;
	color: #fff;
}
</style>
</head>
<body>

<label><input type="radio" name="test" checked="checked" /><span>✔</span></label>
<label><input type="radio" name="test" /><span>✔</span></label>
<label><input type="radio" name="test" /><span>✔</span></label>
<label><input type="radio" name="test" /><span>✔</span></label>
<label><input type="radio" name="test" /><span>✔</span></label>
<label><input type="radio" name="test" /><span>✔</span></label>
<label><input type="radio" name="test" /><span>✔</span></label>

</body>
</html>
Helen_fight 2017-11-02
  • 打赏
  • 举报
回复
input[type=radio] 的样式没法改,要这种样式的,只能自己布局用js模拟radio效果
CSS3样式复选框和单选按钮看起来更漂亮。只有一个input元素。在线demo源码:https://github.com/dcsite/magic-input使用$ npm install magic-input你需要引入 dist/magic-input.css或者dist/magic-input.min.css 文件到你的工程或者HTML中。如果你使用Stylus 你就可以使用 magic-input.styl 文件<link rel="stylesheet" type="text/css" href="dist/magic-input.min.css">Checkbox iPhone 的样式<input type="checkbox" class="mgc-switch mgc-sm" checked /> <input type="checkbox" class="mgc-switch" /> <input type="checkbox" class="mgc-switch mgc-lg" checked />Checkbox<input type="checkbox" class="mgc" checked/> Default <input type="checkbox" class="mgc mgc-primary" checked /> Primary <input type="checkbox" class="mgc mgc-success" /> Success <input type="checkbox" class="mgc mgc-info" checked /> Info <input type="checkbox" class="mgc mgc-warning" checked /> Warning <input type="checkbox" class="mgc mgc-danger" checked /> DangerRadios<input type="radio" name="radio3" class="mgr mgr-sm"/> Default <input type="radio" name="radio3" class="mgr mgr-primary" /> Primary <input type="radio" name="radio3" class="mgr mgr-success mgr-lg" checked/> Success <input type="radio" name="radio3" class="mgr mgr-info mgr-sm" /> Info <input type="radio" name="radio3" class="mgr mgr-warning" /> Warning <input type="radio" name="radio3" class="mgr mgr-danger mgr-lg" /> Danger设置input大小的classsm 是 small的缩写 , lg 是 large缩写在 Checkbox中设置下面class    mgc-sm mgc-lg在 Radio Button中设置下面    mgr-sm mgr-lg改变颜色的 Class在 Checkbox中设置下面class    mgc-primary mgc-info mgc-success mgc-warning mgc-danger在 Radio Button中设置下面mgr-primary mgr-info mgr-success mgr-warning mgr-danger 标签:Magic  CSS框架

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧