如何将复选框(tickbox）的颜色从白色更改为黑色

How to change the color of the checkbox (tickbox) from white to black?

本文关键字：白色 黑色 颜色 复选框 tickbox      更新时间：2024-01-23

我想将复选框的颜色从白色更改为黑色，将勾号的颜色从黑色更改为白色。Wnat知道这可能吗？

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

<!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;  
      }

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

Ps。它是纯css。

相关文章：