Question

我想将我的复选框颜色白色更改为黑色，将我的刻度黑色更改为白色。想知道它是否可能？

我尝试了背景颜色和颜色属性，但它无法正常工作。

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

Answer 1

这就是我用于“样式”复选框的内容：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;  
      }

它不会设置复选框本身的样式，而是修改复选框的标签。为了改变盒子的颜色设置标签：在背景之前你想要什么颜色，并且为了修改勾选设置“input [type =”复选框“]的颜色：选中+标签：在”之前“你需要的颜色。

聚苯乙烯。这是纯粹的CSS。

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

1 个答案: