css改造bootstrap v5.1的radios

Bonjours

于 2022-05-24 15:33:56 发布

阅读量501

点赞数 1

分类专栏： css 文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/Bonjours/article/details/124946980

版权

本文介绍了如何使用Bootstrap v5.1为B端产品创建自定义样式的单选按钮（radios）。通过CSS代码展示了两种不同效果：单独边框的radio和带角标的radio，并提供了相应的HTML结构。这些自定义样式可以提高产品的视觉吸引力和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.效果展示

因为要做B端产品的demo，用了bootstrap v5.1。说实话，如果需要集成很多的控件的话，还不如找一套现成的后台系统去改造，免得自己再去一个个找各种插件进来浪费时间。当然有好处有坏处，看项目。

效果1：单独框

css代码：

.check_outline label {
    position: relative;
    z-index: 1;
}

.check_outline {
    margin-right: 0.8rem;
    position: relative;
    padding: 0 1rem;
    margin-bottom: 0;
    line-height: 32px;
}

.check_outline .form-check-input {
    margin-left: 0;
    position: absolute;
    left: 0;
    width: 100%;
    height: 32px;
    top: 50%;
    margin-top: -16px;
    z-index: 0;
    border-radius: 3px;
}

.check_outline .form-check-input:checked[type="radio"] {
    background: none;
    border-radius: 3px;
}

HTML代码：</

最低0.47元/天解锁文章