javascript - 如何将复选框(tickbox)的颜色从白色变为黑色？-6ren

javascript - 如何将复选框(tickbox)的颜色从白色变为黑色？

转载作者：行者123 更新时间：2023-11-28 00:02:55

25

4

我想将我的复选框颜色从白色更改为黑色，并将我的勾选颜色从黑色更改为白色。想知道是否可行？

我尝试了背景颜色和颜色属性，但它不起作用。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src=" http://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
      <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Serif:700normal"/>
<title>Untitled Document</title>
<script>
function statecheck(layer) {
var myLayer = document.getElementById(layer);
 if(myLayer.checked = true){
 myLayer.style.color = "#bff0a1";
 } else {
 myLayer.style.backgroundColor = "#eee";
 };
}
</script>
label {
margin:0px 2px 4px 2px; 
padding: 1px;
background-color: #eee;
display: block;
width: 50px;
}
</head>

<body>
<form action="" method="get">
<label title="Alabama" id="Alabama"><input type="checkbox" value="checkbox" onchange="statecheck('Alabama')" />AL</label>
<label title="Alaska" id="Alaska"><input type="checkbox" value="checkbox" onchange="statecheck('Alaska')" />AK</label>
<label title="American Samoa" id="AmericanSamoa"><input type="checkbox" value="checkbox" onchange="statecheck('AmericanSamoa')" />AS</label>
</form>
</body>
</html>

最佳答案

这是我用于“样式化”复选框的内容:http://jsfiddle.net/D8daE/1/

HTML:

       <input type="checkbox" id="check1" class="checkbox"><label for="check1"> Example</label>

CSS:

   input[type="checkbox"]{
   margin-left: 10px;
   display: none;  

      }

    label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 17px;
    position: absolute;
    left: 0;
    bottom: 1px;
    background-color: black;
    border-radius: 3px;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
  }

   label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 40px;
    margin-right: 15px;
    font-size: 15px;
  }
      .checkbox label {
    margin-bottom: 10px;
    }

       .checkbox label:before {  
            border-radius: 3px;  
    }  

     input[type="checkbox"]:checked + label:before {  
       content: "\2713";  
       text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
       font-size: 15px;  
       color: white;
       text-align: center;  
       line-height: 15px;  
      }

它不会为复选框本身设置样式，而是修改复选框的标签。为了更改框的颜色，将 label:before background 设置为您想要的颜色，为了修改勾号，将 "input[type="checkbox"]:checked + label:before"的颜色设置为任何颜色你需要的颜色。

附言。它是纯 CSS。

关于javascript - 如何将复选框(tickbox)的颜色从白色变为黑色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20339930/

25

4

0

文章推荐： html - 如何使用 flexbox 正确居中文本和图像？

文章推荐： javascript - 如何将类添加到div中的当前事件div

文章推荐： c++ - 参数与相同类型的参数不兼容

android - 启动画面 - 白色
对于我正在使用的启动画面: setContentView(R.layout.activity_home); new Handler().postDelayed(new Runnable() {
c# - 白色 - 文件打开对话框
这是我的问题。我有一个应用程序，它打开一个文件打开对话框，我试图将文件路径和文件名输入到“文件名:”组合框部分。应用程序加载了您登录的表单。这将打开另一个表单，其中有许多按钮。选择其中一个按钮会打开
r - sjPlot - 将绘图线颜色更改为黑色/白色
我正在使用 sjPlot 的 plot_model() 绘制回归模型。我想将我的线条颜色从 sjPlot 主题(红色和蓝色线条)更改为黑白或灰度。但是，当我使用 set_theme(theme_bw(
javascript - 白色 Sprite Material ？
所以看起来SpriteMaterial的默认颜色是0xFFFFFF。这似乎意味着 Sprite 没有颜色。如果我将 Material 的颜色属性更改为 0xFF0000， Sprite 将显示为红色。
python - 如何在文档中找到最大的空白(白色)正方形区域并返回其坐标和面积？
我需要在文档中找到最大的空白区域，并使用python在其中放置QR码，以显示其坐标，中心点和区域。我认为OpenCV和Numpy应该足以完成此任务。使用什么样的THRESH？由于扫描类型很多: 灰
android - 白色 tabLayout 上的波纹效果
Android 选项卡上的波纹效果默认为白色。我想在 tablayout 上添加波纹效果，但我的选项卡背景已经是白色的，并且波纹效果在其上不可见。有没有办法改变 tabLayout 波纹效果的颜
android - Android 上的谷歌地图空白页(白色)
我正在尝试在我的应用程序上显示一个基本的谷歌地图，但它不起作用，它显示一个白屏，即使我有网络连接，我也检查了我的 MANEFIST 一百次，我生成了一个 deubg key ，并确定它是是的我想是否
css - 内部文字阴影，蓝色背景，白色？
我有一个带有框阴影的蓝色框，文本颜色为白色，如下所示: . 是否可以添加内阴影？喜欢this (jsfiddle)？它不适用于白色文本，就像我的示例一样。 body { /* This has t
html - 一个元素的不可见性通过另一个(白色)以及背景图像
这是我的代码: body{ background: url(https://static.pexels.com/photos/29628/pexels-photo.jpg) no-repeat
javascript - 白色 slider 的当前点
我已经从 w3school 实现了一个 slider 。我还从另一个例子中实现了这些点来跟踪幻灯片。如果我单击它们，它们工作正常，问题是我无法使当前/事件点(从实际位置的幻灯片)显示为纯白色，让你知道
css - Bootstrap 白色/空白框替换
我是 bootstrap 的新手，试图提高我的技能，我已经制作了 5 个盒子，如您所见(左侧两个，右侧 3 个)，我的问题是为什么盒子编号“5”看起来不同，而不是相应的与数字 2 和 4 不在同一行，
jquery - 白色 Bootstrap 导航栏在段落上变得透明
我一直在研究一种导航，它会在滚动过标题后获得不透明度并缩小 Logo - 一切都很好，除了当导航栏覆盖白色背景上的段落时，它会变成透明并造成视觉困惑.我猜这可能是使用 rgba 的问题？我想保持不透明
css - 网页中的字体看起来更粗(白色，深色背景)
有一个关于名为 Rockwell Std Light 的字体的问题。我在 Photoshop 中用蓝色背景显示白色文本，在 Dreamweaver 中也做了同样的事情。但是，网页中的字体总是看起来比较
iphone - UIImagePickerControllerSourceTypePhotoLibrary 状态栏纯色/白色
我正在创建一个应用程序，它会在某个时候打开照片库。问题是照片库中的状态栏是黑色透明的，而我想要一个默认的应用程序(纯白色)。有什么办法可以改变它..？我想补充一点，我试过这个:iOS SDK - H
c# - 白色 Blob 检测
我正在尝试使用 AForge.NET 来检测图像中的粗白线。这就像我得到的管道一样，是应用阈值过滤器后我想要的结果。我知道如何检测形状并且我已经在这样做了，但是这在任何形状下都不匹配，因为它没有边
Android Jetpack Compose 白色 TabRow
我正在尝试让 Tabs 在 Android 上通过 compose 与 TabRow 一起使用。我想要的是 TabRow 有白色背景。如文档 (https://developer.android.c
installation - WiX 3 - 图标始终为空白(白色)
我已经为我的 Visual Studio 安装了最新的 WiX(安装程序)，当我想设置图标时，它总是以空白结束。我正在尝试设置“所有 Windows 软件”中条目的图标在下面的图片中你可以看到图标的
java - 重新创建 fragment 后微调器文本变为空白/白色
为什么选择后微调器文本会变成空白？如果我使用 getActivity().recreate()，微调器文本会闪烁，然后变为空白；做出选择后。我正在使用 recreate 根据微调器选择加载区域设置
滚动时出现 CSS/Chrome 白色 block
我最近遇到了的问题每当我滚动时，网站顶部/底部都会出现白色块它更大一点。白色块是的一部分正文背景，因为改变 body backgroundcolor 会使块也改变颜色。我已经试过了设置 bo
ios - 重新打开应用程序时，白色 UIStatusbar 会轻微闪烁？
我在 iOS7、iPhone 4 及更高版本的状态栏上遇到了一些问题。因为我的应用程序的背景是深色的，所以我需要状态栏是白色的，这样看起来不错。但是，当最小化应用程序、等待几秒钟并返回应用程序时，它会

首页

博学

6Ren·AI

商城

javascript - 如何将复选框(tickbox)的颜色从白色变为黑色？