首页
学习
活动
专区
工具
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选择器来定义禁用时的背景颜色。

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

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

相关·内容

css颜色介绍背景设置

现在美丽网页的设计图中颜色五花八门的,网页模块中漂亮背景图也很多,网页中颜色背景设置必不可少,接下来我们就先学颜色是如何表达的,要知其然,知其所以然。...举例: #ff0000 红色 #ffff00 黄色 #ffffff 白色,也可以将两个相同值合并,如#fff白色 #000黑色 6.颜色名称:tomato,orange, gray 如何设置背景颜色...background-image:url("") /*设置背景图路径(相对绝对路径)*/ background-repeat:repeat-x /*背景图是否重复,repeat-x水平方向重复;repeat-y...fixed固定背景图;scroll跟随页面滚动*/ body{ background-color:red;/*背景颜色设置为红色,背景图覆盖不完全的时候,剩余的有背景颜色填充*/ background-image...:url("bg.jpg");/*url中添加的是图片路径(相对绝对路径)*/ background-repeat:no-repeat;/*设置背景图不重复*/ background-attachment

1.8K40

利用GDI+制作背景颜色淡入淡出效果的按钮

其实不难,只要自定义一个用户控件的外怪就可以了,用到GDI+技术时钟控件来操作… 首先我们在VS2008里面新建一个Windows窗体控件库的项目,系统会自动生成一个用户控件UserControl1....System.ComponentModel.Container components = null; public UserControl1() { InitializeComponent(); //一下几个语句是对控件进行设置对...this.SetStyle(ControlStyles.UserPaint, true); this.UpdateStyles(); this.BackColor = Color.Transparent; //设置控件背景色透明...using (Pen p = new Pen(this.HighlightColor)) { g.DrawPath(p, rr); } } } /// /// 画出按钮背景...SolidBrush(Color.FromArgb(alpha, this.ButtonColor))) { g.FillPath(sb, rr); } } } /// /// 画出按钮的上半部分高光颜色

1K30

为什么单选按钮复选框不能共存?

视觉线索上只有圆点复选框的区别;除了选项之外,其他对用户毫无意义。因此,单选按钮复选框同时存在违反了用户体验中的一致性原则。 设计师开发人员从来没有质疑过它们的共存,因为一直以来都是这样的。...单选按钮复选框具有类似的功能,并在相同的上下文中使用,但它们的外观并没有统一之处。 单选按钮复选框 单选按钮表示相互排斥的选项,而复选框表示相互包含的选项。...它结合了单选按钮的外部形状复选框的复选标记提示,如下图所示。...旧的设计实践在不断发展 单选按钮复选框已经共存很久了。然而,由于对用户体验渐渐有了更好的理解,过去许多旧的设计实践也在不断发展演变。...例如,清除表单的重置按钮、必填字段上的红色星号密码确认字段现在几乎都消失了。单选按钮复选框可能很快也会这样做,因为生活中的一些事情一样,界面设计也在不断发展变化。

1.4K20

VC++6.0中改变窗口背景颜色控件背景颜色,CDC,我的感觉

VC++6.0中改变窗口背景颜色控件背景颜色 ?...1.改变对话框的背景色 在C…App类中的InitInstance()里添加 SetDialogBkColor(RGB(0,192,0),RGB(0,0,0)); 2.如果想改变静态文本或单选按钮背景色可以用你说的那个获得控件...(RGB(0,255,0)); (3)在OnCtlColor函数中添加代码以改变控件的文字颜色背景色 switch(pWnd->GetDlgCtrlID()) { case(IDC_INPUT):  ...RGB(255,0,20));   pDC->SetBkMode(TRANSPARENT);   return m_brush;   break; default:   break; } 3.如果想改变按钮背景色...,简直太难了,你要重写两个类,还需要在网上下,孙鑫的视频教程中也简单介绍了这个,可只是改变按钮的文字颜色  int SetBkMode(   HDC hdc,      // handle to DC

2.8K30

C语言怎么改变窗口的字体颜色背景颜色

如果学C语言久了,难免会对弹出的黑窗口感到厌烦,那这时候如果能改一下黑窗口的背景颜色字体颜色,也许会给自己一个好一点的心情。废话不多说,现在开始教你怎么简单地改变窗口的字体颜色背景颜色。...,我们就可以直接调用system(“color 07”)函数来改变背景字体色,其中,”color 07″中的07代表的是两个数字,上面第二点有说到,0是黑色,7是白色,这是调试窗口的默认颜色,我们可以将...”color 07″改成”color 12″就会看到背景色变为了蓝色,字体变为了绿色。...知道了原理后,你就可以不用继续往下看,直接用system(“color 前景色值背景色值”)函数来改变颜色了。...不过为了更好地运用记忆,可以将这个系统函数封装一下; void setColor(unsigned short backColor=0, unsigned short textColor=7){ char

5.7K20

checkbox(复选框)radio(单选按钮)的区别与详解

选中和取消 选中一个 checkbox(复选框) 后,再次点击它,即可取消选中 选中一个 radio(单选按钮) 后,再次点击它,不能取消选中 <!...”多选 默认情况下(不设置name属性时),是点了几个 checkbox 就有几个 checkbox 被选中,所以严格来说,要实现 checkbox 的“单选”,就只能点击一个 checkbox,如果点击了多个...br> 甘蔗 radio单选多选...默认情况下(不设置name属性时),也是点了几个 radio 就有几个 radio 被选中,并且选中后再次点击不可取消选中,除非重置或者刷新页面等 但 radio 既然是单选按钮,肯定是可以实现单选的操作的...name 属性的值不相同来实现 如果有三个 radio 按钮,前两个的 name 属性的值是一样的,但第三个前两个不一样,则前两个 radio 按钮,只能同时选中一个,第三个 radio 按钮可以第一个或第二个同时被选中

4.1K10
领券