Как изменить цвет флажка (белый) на черный?

Я хочу изменить свой цвет флажка от белого до черного и цвет моего тика до белого. Чтобы узнать, возможно ли это?Как изменить цвет флажка (белый) на черный?

Я попробовал цвет фона и цвет собственности, он не работает.

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

источник

2013-12-02 user186730

Нет, его невозможно. Но вы можете использовать изображение на флажке, чтобы имитировать другой дизайн. –

Как сказал Петр, вы не можете сделать это напрямую, но вы можете заменить флажок набором вкл/выкл изображений, чтобы добиться эффекта, который вы ищете. См. Этот вопрос SO для получения подробной информации о том, как это сделать: http://stackoverflow.com/questions/3772273/pure-css-checkbox-image-replacement –

Это то, что я использую для "стилизации" флажков: 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 =" checkbox "]: отметьте + метку: до" до независимо от того, какой цвет вам нужен.

Ps. Это чистый css.

источник

2013-12-03 05:02:15 SpiderLinked

Как изменить цвет флажка (белый) на черный?

ответ

Смежные вопросы