微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css单选框怎么改成正方形的

使用css样式可以将表单元素中的单选框改成正方形的,只需要增加一些样式代码即可。

/* 定义单选框的样式 */
input[type="radio"]{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    display:inline-block;
    width:20px;
    height:20px;
    border:1px solid #ccc;
    border-radius:50%;
    outline:none;
    Box-shadow:none;
    margin:0;
    padding:0;
}

/* 选中单选框的样式 */
input[type="radio"]:checked{
    background-color:#66c4ff;
}

css单选框怎么改成正方形的

以上代码中,我们首先定义了单选框的样式,去掉了认的外观,然后指定了宽度、高度、边框、边框半径等属性。接着,我们对选中的单选框应用了样式,改变了其背景色。

使用以上样式代码,就可以将单选框改成漂亮的正方形了。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。