开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

<!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选择器来定义禁用时的背景颜色。

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

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Android开发随手记录-实现ListView单选设置item背景颜色和字体颜色

开发遇到以下需求，点击列表项改变背景和字体颜色，效果如下图： ?...我们可以看到左边是一个listView，点击选中其中一项就会变成跟其他项不一样的背景颜色，字体颜色也会不一样，这样的效果怎么实现？...先从ListView属性出发，设置它为单选： android:choiceMode="singleChoice" <ListView android:id="@+id/lv_symptoms...android:color="@color/main_color"/> 这是比较简单实现ListView单选的方法

1.5K3 0

小程序鼠标点击按钮（改变背景颜色字体）

目标需求：实现下图，给点击的view增加类，每次只能选择一个。主要思路：给点击的view增加类，依靠点击的index对state进行赋值。如果相同时，给该v...

3.8K2 0

HTML：设置背景颜色和图片

设置背景颜色 Set the Background 设置本地背景图片 Set the Background 设置网络背景图片 <body

5.9K2 0

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.8K4 0

markdown怎么设置颜色和字体以及背景颜色？

使用markdown写博客时，可能需要设置字体、颜色以及背景色，现在就做一个小小的分享。...这是一串Tahoma字体这是一串黑体字这是一串微软雅黑这是一串华文彩云背景色+字体+字的size 颜色设置灰色处理背景色是：#bfe1f1 这是一串华文彩云背景色...+字体+字的size 颜色设置灰色处理背景色是：#bfe1f1 Size：规定文本的尺寸大小。

2.2K1 0

pycharm怎么设置字体和颜色_pycharm背景颜色

设置字体和大小如下：（点击Apply应用） 2.Editor -Font-选择主题Shame （需要Save As…才可以修改，个人喜欢黑色底，选了个浅黑色），设置字体和大小 3.保存，应用后，查看自己面板中显示是否合意

4K5 0

8、单选按钮（JRadioButton）和复选框（JCheckBox）

单选按钮（JRadioButton）和复选框（JCheckBox）实现一个单选按钮（或复选框），此按钮项可被选择或取消选择，并显示其状态。...3) JRadioButton(Icon icon,boolean selected) 创建一个具有指定图像和选择状态的单选按钮，但无文本。...5) JRadioButton(String text,boolean selected) 创建一个具有指定文本和选择状态的单选按钮。...6) JRadioButton(String text,Icon icon) 创建一个具有指定的文本和图像并初始化为为选择的单选按钮。...7) JRadioButton(String text,Icon icon，boolean selected) 创建一个具有指定的文本、图像和选择状态的单选按钮复选框和单选按钮的构造方法相似

1.5K0 0

利用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); } } } /// /// 画出按钮的上半部分高光颜色

1K3 0

Android编程实现带有单选按钮和复选按钮的dialog功能示例

本文实例讲述了Android编程实现带有单选按钮和复选按钮的dialog。...分享给大家供大家参考，具体如下：带有单选按钮的dialog： package example.com.myapplication; import android.app.Activity; import...//设置标题 .setIcon(R.mipmap.ic_launcher) //设置图标 //设置对话框显示一个单选List，指定默认选中项，同时设置监听事件处理...selectedCityIndex = which; //选中项的索引保存到选中项变量 } }) //添加取消按钮并增加监听处理...Toast.LENGTH_SHORT).show(); } }) .create(); alertDialog.show(); } } 带有复选按钮的

3K4 1

Android开发实现按钮点击切换背景并修改文字颜色的方法

本文实例讲述了Android开发实现按钮点击切换背景并修改文字颜色的方法。...分享给大家供大家参考，具体如下：其实原理很简单，用到的是selector，用来设置android：background和android：textcolor属性，selector可以用来设置默认时候、点击时候的背景图片和文字颜色的属性...，过程如下：这两个文件如下： 1.当点击按钮，改变文字的颜色： <?...，改变按钮的背景： <?...-- 定义按钮按下时的图片 -- <item Android:drawable="@drawable/blue" Android:state_pressed="true"/ <!

3.7K2 0

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

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

1.4K2 0

SeleniumWebDriver处理复选框CheckBox和单选按钮RadioButton

该文章主要讲解如何识别复选框CheckBox和单选按钮RadioButton 单选按钮RadioButton 复选框CheckBox 查找元素异常情况汇总单选按钮RadioButton 单选按钮也可以通过...Click()方法打开使用网页http://demo.guru99.com/test/radio.html作为练习，如下：使用radio1.click() 切换到Option1单选按钮；使用radio2....click() 切换到Option2单选按钮，取消选中Option1 ；代码如下图所示： ?...如下的代码是使用账户名和密码登陆百度网址，其中可见到下次自动登陆的复选框。 ?...WebElement radio2 = driver.findElement(By.id("vfb-7-2")); //选择单选按钮

3.4K1 0

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.8K3 0

IDEA设置背景颜色和字体「建议收藏」

今天在使用Idea的时候，背景色在眼睛长时间的使用下，会使眼睛感到不舒服， (而且还不好看 )所以在设置了一下了护眼色。...背景色设置：点击File找到Settings 点进去在Editor—>Color Scheme（颜色方案设置）选择General, 在General 选择Text 点Default text Default...text(表示的是默认的文本颜色设置) 我设置的颜色是R = 199； G = 237; B = 204; #为#C7EDCC 现在设置好了，就可以使用Idea了，当然如果你不想使用这个颜色...，也可以自己动手调一下颜色喽！！！！

3.8K2 0

Python批量修改Excel文件格式：加粗、颜色交替、渐变背景色填充

功能描述：首先生成几个测试用的Excel文件，然后批量修改这些文件的格式，把表头加粗并设置为黑体，其他行字体为宋体，设置奇偶行颜色不同，并设置偶数行为从红到蓝的渐变背景色填充。...font = Font('宋体', color='00CCFF') for cell in row: cell.font = font # 偶数行添加背景填充色

2.5K5 0

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

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

5.7K2 0

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

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

4.1K1 0

Bash echo输出带颜色和背景的文本

Bash echo输出带颜色和背景的文本 1、先上效果图 2、bash代码 #!...******** black="0" red="1" green="2" yellow="3" blue="4" magenta="5" cyan="6" white="7" # Color 为文本和背景设置颜色...Content="${Content} $j " done echo -e ${SetColor}${Content}${EndColor} } # echo_black 输出黑色文本可加背景颜色参数...else Bg="8" Content=$1 fi Color $black $Bg $Content } # echo_red 输出红色文本可加背景颜色参数...else Bg="8" Content=$1 fi Color $red $Bg $Content } # echo_green 输出绿色文本可加背景颜色参数

2K2 0

纯CSS实现的一个对角线填充颜色的按钮悬停动效

1832 0

Pycharm—-设置背景颜色和字体的样式「建议收藏」

编辑器默认显示的样式背景为白色，看着会刺眼，也不方便查找我们写的某些参数等，通过设定，可以对页面的样式进行选择更改，方便直观的在编辑器中查看自己所写的代码，设置前：设置后操作方式：转载于

1.7K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭