怎么把表单里的单选按钮radio圆放大一点

 我来答
Bangboss
2014-12-12 · TA获得超过403个赞
知道小有建树答主
回答量:1021
采纳率:96%
帮助的人:81.8万
展开全部

/*----------checkbox radio=-----------------------------*/

.cb {

display: none;

}

.cb + label {

background-color: #fafafa;

border: 1px solid #cacece;

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);

padding: 9px;

border-radius: 3px;

display: inline-block;

position: relative;

top:4px;

}


.cb + label:active, .cb:checked + label:active {

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);

}


.cb:checked + label {

background-color: #e9ecee;

border: 1px solid #adb8c0;

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);

color: #99a1a7;

}


.cb:checked + label:after {

content: '\2714';

font-size: 14px;

position: absolute;

top: 0px;

left: 3px;

color: #065997;

}


.rd {

display: none;

}


.rd + label {

-webkit-appearance: none;

background-color: #fafafa;

border: 1px solid #cacece;

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);

padding: 9px;

border-radius: 50px;

display: inline-block;

position: relative;

top:4px;

}


.rd:checked + label:after {

content: ' ';

width: 12px;

height: 12px;

border-radius: 50px;

position: absolute;

top: 3px;

background: #065997;

box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);

text-shadow: 0px;

left: 3px;

font-size: 32px;

}


.rd:checked + label {

background-color: #e9ecee;

color: #99a1a7;

border: 1px solid #adb8c0;

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);

}


.rd + label:active, .rd:checked + label:active {

box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);

}


对应的html如下:

<label class="first"><input class="rd fld" id="t47" type="radio" name="F12_radio" value="会"><label></label> 会</label>


效果如下:

liangzain79
推荐于2017-06-06 · TA获得超过1234个赞
知道小有建树答主
回答量:866
采纳率:82%
帮助的人:261万
展开全部
自己做一个大一点的图片,通过css控制替换上去。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式