logo标签列表

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

javascriptphphtmlcss
3

我想把我的复选框颜色从白色改为黑色，将勾选的颜色从黑色改为白色。请问这是否可能？

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

<!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>
2
不，这是不可能的。但是你可以在复选框上使用图像来模拟其他设计。 - Piotr Wójcik
2
就像Piotr所说，你不能直接这样做，但是你可以用一组开/关图片来替换复选框以达到你想要的效果。请参考这个SO问题以获取详细信息：https://dev59.com/tm865IYBdhLWcg3whe9f - Dryden Long
1个回答
4
这是我用来“美化”复选框的代码：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的背景设置为所需的颜色，并为了修改勾选状态，请将“input[type =”checkbox“]:checked + label:before”的颜色设置为所需的颜色。 附注：这是纯CSS。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接