复选框CSS无法更改复选框的背景颜色[重复]

2023-11-21

我想将我的复选框更改为这种颜色#FA9E57。我正在使用 bootstrap v 4.6。

这是我的复选框代码:

input[type=checkbox]{
    width: 20px;
    height: 20px;
    background-color: #FA9E57;
}

input[type=checkbox]:checked{
    background-color: #FA9E57;
}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="register.css">
    <title><%=judul %></title>
    
    <body>
    <div class="form-group my-4">
       <div class="form-check">
         <input class="form-check-input" type="checkbox" id="privacy">
         <label class="form-check-label ml-3" for="privacy">
          Agree privacy
         </label>
       </div>
    </div>
    </body>

您可以使用accent-colorCSS 属性可更改复选框和单选按钮的背景颜色。

input[type=checkbox] {
  accent-color: red;
}

只有在检查/选择输入后才会显示颜色。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

复选框CSS无法更改复选框的背景颜色[重复] 的相关文章

  • qUnit:在 qunit-fixture 之外编写的 Twitter Bootstrap 模式

    我在为使用 Twitter Bootstrap 的项目编写 qUnit 测试时遇到了困难 当生成模态时 它将覆盖层放在 qunit fixture 之外 因此当运行下一个测试时 覆盖层不会被删除 有人遇到这个问题吗 点击事件 链接到jsfi
  • HTML5 安卓开发

    我对制作 Android 应用程序很感兴趣 而我的主要爱好是 Web 开发 现在让我困惑的是 人们用 HTML5 CSS3 JavaScript 语言制作应用程序 这些应用程序是在 Android 手机上的网络浏览器上运行还是像 Andro
  • CSS 中“!important”的反义词是什么?

    我正在构建一个 jQuery 插件 它使用 CSS 样式向嵌套 DIV 标签添加颜色和边距 由于我宁愿将插件保留为单个文件 因此我的代码使用 jQuery 将这些颜色和边距作为 CSS 属性直接添加到 DIV 中 css 方法 这些属性的值
  • 使用 Javascript 增加 div 中的数字

    我对 Javascript 很陌生 所以我认为这是一个愚蠢的错误 function upvote var score parseInt document getElementById voteScore innerHTML score sc
  • 如何在我的网站上获取用户的国旗

    我想在我的网站上显示用户 访问者的国旗 我使用不同的技术 如 php jsp 和简单的 html 所以我想要一个代码 通过放置在我的网站上 访问者可以看到它 并且它应该在所有平台上运行 简而言之 我想要国家检测 API 如果有人能帮助我 我
  • 图像上的文本和背景颜色叠加

    我正在尝试创建一个与图像大小完全匹配的纯色叠加层 并在该叠加层上显示文本 如果可能的话 我想仅使用 HTML 和 CSS 来完成此操作 图像可以是任何大小 并且将调整大小以适合其父容器并居中 像这样的东西 不起作用 HTML div cla
  • 单击 DIV 时滚动到顶部? [关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • iOS 10.3 safari text-align:调整波斯语/阿拉伯语内容的错误

    在更新到 10 3 之前 我的网站在 iPhone 的所有移动浏览器上都能正常运行和查看 从我将 iOS 更新到 10 3 后 我的内容页面遇到了一个问题 内容被包装在 div CSS 属性为text align justify 我的内容在
  • jQuery mouseover 显示隐藏的 div 并显示 div(如果鼠标仍在 div 上)

    我的鼠标悬停和鼠标移出功能有问题 当我将鼠标悬停在链接上时 它会显示隐藏的 div 当我将鼠标移出 div 时 它会隐藏该 div 问题是 如果我将鼠标悬停在链接上 然后将鼠标移动到不在 div 上方的其他位置 div 不会消失 如果我使用
  • “mat-card” 不是 Angular 7 中的已知元素

    我看到了很多关于此的问题 但似乎与我遇到的问题不同 我刚刚创建了我的第二个角度项目 我下面有一个新组件src app employees我试图在employees component html 中使用 我收到的错误是 Uncaught Er
  • 在 Bootstrap 3 中的工具提示中添加换行符

    我正在使用 Bootstrap 3 并向我的 div 添加了一个工具提示 我尝试过使用 n 和 创建新行 Bootstrap 会阻止我吗 div class content show tooltip 你需要添加data html true
  • CSS/XHTML 菜单 - 在所有浏览器中工作 - IE6 帮助

    我发现这个菜单正是我想要的 它适用于所有现代浏览器和 IE 7 8 我需要找到一个修复程序才能在 IE6 中工作 任何帮助将不胜感激 http lab returnwt net htmlcss tabmenu http lab return
  • 如何在 django 表单中设置自定义 HTML 属性?

    我有一个 Django 表单 它是页面的一部分 假设我有一个字段 search input forms CharField u Search word required False 我只能通过模板访问它 form search input
  • 将 HTML 编辑器的内容保存为桌面上的 HTML 文件

    我想通过单击按钮来保存 TinyMce HTML 编辑器的内容 TinyMce 是本地安装的 我在 Chrome 中使用它 我见过这个answer https stackoverflow com a 30740104 3154274然后on
  • 使用 CSS 网格布局跨越所有列/行的项目

    随着 CSS 网格布局模块很快在 Firefox 和 Chrome 中发布 我想我应该尝试了解如何使用它 我尝试用一 个项目创建一个简单的网格a跨越所有行的左侧 其他项目 b c d e等 跨越各个行的右侧 跨越行右侧的项目数量是可变的 因
  • Internet Explorer 10,最大 div 大小为 1.533.917 像素

    我需要制作一个非常大的 div 以百万像素为单位 搜索我发现这个线程证明 IE 可以管理最多 10 000 000 px 确定最大可能的 DIV 高度 https stackoverflow com questions 7719273 de
  • 使用 Bootstrap,但文本不响应

    我正在开展一个学校项目 http lauralynn87 github io WSP Project index html http lauralynn87 github io WSP Project index html 我正在使用 Bo
  • 电子邮件通讯未正确呈现

    我是 CSS 和 HTML 新手 我有一个包含 HTML 和 CSS 代码的电子邮件模板 我在新闻通讯模板的右上角放置了一个粉色圆圈框 http www pedersenshotell se newsletter http www pede
  • 是否可以使 Font Awesome 图标大于“fa-5x”?

    我正在使用这个 HTML 代码 div class col lg 4 div class panel div class panel heading div class row div class col xs 3 i class fa f
  • 如何使用FileSystem API的window.requestFileSystem?

    我用 JavaScript 编写了以下代码 JavaScript 代码 var fs null function initFS window requestFileSystem window requestFileSystem window

随机推荐