修改单选框属性

qq_15950893 2020-04-30 10:15:24
代码如下,效果如第一副图,一选中单选框,整个框就填充了,想要的效果图如第二幅图。各位帮帮忙,谢谢
...全文
509 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_15950893 2020-05-05
  • 打赏
  • 举报
回复
引用 4 楼 天际的海浪 的回复:
加个白色的内阴影 box-shadow: inset 0px 0px 0px 2px #fff;
谢谢你,你的方法方便
qq_15950893 2020-05-04
  • 打赏
  • 举报
回复
引用 6 楼 qq1250947732 的回复:

input[type='radio'],input[type='checkbox']{
margin: 0;
position: relative;
outline: none;
width: 100px;
height: 100px;
font-size: 100px;
}
input[type='radio']:before{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
border: 1px solid #01b9fe;
}
input[type='radio']:checked:after{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 66%;
height: 66%;
background: #01b9fe;
border-radius: 50%;
}

input[type='checkbox']:before{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
background: #fff;
border: 1px solid #01b9fe;
}
input[type='checkbox']:checked:after{
content: '✔';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 66%;
height: 66%;
text-align: center;
line-height: 66%;
color: #01b9fe;
}

复选框的代码我也顺带给你高出来了

谢谢你
qq_15950893 2020-05-04
  • 打赏
  • 举报
回复
引用 5 楼 qq1250947732 的回复:


input[type='radio']{
margin: 0;
position: relative;
outline: none;
}
input[type='radio']:before{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
border: 1px solid #01b9fe;
}
input[type='radio']:checked:after{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 66%;
height: 66%;
background: #01b9fe;
border-radius: 50%;
}


把上面CSS加在你的CSS里面就行

采纳,加分,分就这么一点点,太抠了
哎哟,那你们一般给多少分?
qq1250947732 2020-05-01
  • 打赏
  • 举报
回复

input[type='radio'],input[type='checkbox']{
margin: 0;
position: relative;
outline: none;
width: 100px;
height: 100px;
font-size: 100px;
}
input[type='radio']:before{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
border: 1px solid #01b9fe;
}
input[type='radio']:checked:after{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 66%;
height: 66%;
background: #01b9fe;
border-radius: 50%;
}

input[type='checkbox']:before{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
background: #fff;
border: 1px solid #01b9fe;
}
input[type='checkbox']:checked:after{
content: '✔';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 66%;
height: 66%;
text-align: center;
line-height: 66%;
color: #01b9fe;
}

复选框的代码我也顺带给你高出来了

qq1250947732 2020-05-01
  • 打赏
  • 举报
回复


input[type='radio']{
margin: 0;
position: relative;
outline: none;
}
input[type='radio']:before{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
border: 1px solid #01b9fe;
}
input[type='radio']:checked:after{
content: ' ';
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
width: 66%;
height: 66%;
background: #01b9fe;
border-radius: 50%;
}


把上面CSS加在你的CSS里面就行

采纳,加分,分就这么一点点,太抠了
qq_15950893 2020-04-30
  • 打赏
  • 举报
回复
引用 1 楼 潇湘忆梦 的回复:


.ant-radio-inner::after {
    position: absolute;
    top: 3px;
    left: 3px;
    display: table;
    width: 8px;
    height: 8px;
    background-color: #1890ff;
    border-top: 0;
    border-left: 0;
    border-radius: 8px;
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all .3s cubic-bezier(.78,.14,.15,.86);
    transition: all .3s cubic-bezier(.78,.14,.15,.86);
    content: ' ';
}

.ant-radio-checked .ant-radio-inner::after {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: all .3s cubic-bezier(.78,.14,.15,.86);
    transition: all .3s cubic-bezier(.78,.14,.15,.86);
}
帅哥,请问怎么用啊?radio和label的class是啥?不需要先去掉原来的radio属性么?
qq_15950893 2020-04-30
  • 打赏
  • 举报
回复
引用 1 楼 潇湘忆梦 的回复:


.ant-radio-inner::after {
    position: absolute;
    top: 3px;
    left: 3px;
    display: table;
    width: 8px;
    height: 8px;
    background-color: #1890ff;
    border-top: 0;
    border-left: 0;
    border-radius: 8px;
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all .3s cubic-bezier(.78,.14,.15,.86);
    transition: all .3s cubic-bezier(.78,.14,.15,.86);
    content: ' ';
}

.ant-radio-checked .ant-radio-inner::after {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: all .3s cubic-bezier(.78,.14,.15,.86);
    transition: all .3s cubic-bezier(.78,.14,.15,.86);
}
谢谢你,我试试,为什么after前面有2个冒号?
潇湘忆梦 2020-04-30
  • 打赏
  • 举报
回复


.ant-radio-inner::after {
    position: absolute;
    top: 3px;
    left: 3px;
    display: table;
    width: 8px;
    height: 8px;
    background-color: #1890ff;
    border-top: 0;
    border-left: 0;
    border-radius: 8px;
    -webkit-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    -webkit-transition: all .3s cubic-bezier(.78,.14,.15,.86);
    transition: all .3s cubic-bezier(.78,.14,.15,.86);
    content: ' ';
}

.ant-radio-checked .ant-radio-inner::after {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: all .3s cubic-bezier(.78,.14,.15,.86);
    transition: all .3s cubic-bezier(.78,.14,.15,.86);
}
天际的海浪 2020-04-30
  • 打赏
  • 举报
回复
加个白色的内阴影 box-shadow: inset 0px 0px 0px 2px #fff;

61,110

社区成员

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

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