首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Bootstrap4单选按钮背景和填充颜色

可以通过自定义CSS样式来实现。以下是一个示例代码:

代码语言:html
复制
<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap4单选按钮背景和填充颜色</title>
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <style>
    /* 自定义样式 */
    .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
      background-color: #007bff; /* 选中时的背景颜色 */
      border-color: #007bff; /* 选中时的边框颜色 */
    }

    .custom-radio .custom-control-input:focus ~ .custom-control-label::before {
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); /* 获得焦点时的阴影效果 */
    }

    .custom-radio .custom-control-input:disabled ~ .custom-control-label {
      opacity: 0.5; /* 禁用时的透明度 */
    }

    .custom-radio .custom-control-input:disabled ~ .custom-control-label::before {
      background-color: #e9ecef; /* 禁用时的背景颜色 */
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Bootstrap4单选按钮背景和填充颜色</h1>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" id="radio1" name="radio" class="custom-control-input">
      <label class="custom-control-label" for="radio1">选项1</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" id="radio2" name="radio" class="custom-control-input">
      <label class="custom-control-label" for="radio2">选项2</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" id="radio3" name="radio" class="custom-control-input" disabled>
      <label class="custom-control-label" for="radio3">禁用选项</label>
    </div>
  </div>
</body>
</html>

在上述代码中,我们使用了自定义的CSS样式来修改单选按钮的背景和填充颜色。通过设置.custom-radio .custom-control-input:checked ~ .custom-control-label::before选择器来定义选中时的背景颜色和边框颜色。通过设置.custom-radio .custom-control-input:focus ~ .custom-control-label::before选择器来定义获得焦点时的阴影效果。通过设置.custom-radio .custom-control-input:disabled ~ .custom-control-label选择器来定义禁用时的透明度。通过设置.custom-radio .custom-control-input:disabled ~ .custom-control-label::before选择器来定义禁用时的背景颜色。

这是一个简单的示例,你可以根据自己的需求进行进一步的样式定制。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

1分28秒

PS小白教程:如何在Photoshop中制作出镂空文字?

领券