Jquery 如何更改复选框的背景色?
CSS: HTML:Jquery 如何更改复选框的背景色?,jquery,Jquery,CSS: HTML: manoji 嗨,朋友们,这里我需要的背景颜色的复选框是绿色的,而我检查它应该变成红色,当我取消选中。谁能给我一个解决办法 未选中时为绿色,选中时为红色。。这是通过隐藏默认复选框并将标签样式设置为隐藏复选框的顶部,使其看起来像复选框来实现的 <input type="checkbox" name="parttwo" id="partoption2" value="206365-KT:" >manoji 还有html label { position
manoji
嗨,朋友们,这里我需要的背景颜色的复选框是绿色的,而我检查它应该变成红色,当我取消选中。谁能给我一个解决办法
未选中时为绿色,选中时为红色。。这是通过隐藏默认复选框并将标签样式设置为隐藏复选框的顶部,使其看起来像复选框来实现的
<input type="checkbox" name="parttwo" id="partoption2" value="206365-KT:" >manoji
还有html
label {
position: absolute;
width: 20px;
height: 20px;
background-color: green;
-webkit-transition: background-color 1s ease-out 1s;
-moz-transition: background-color 1s ease-out 1s;
-o-transition: background-color 1s ease-out 1s;
transition: background-color 1s ease-out 1s;
}
.checkbox_red input[type=checkbox]:checked + label {
background-color:red;
-webkit-transition: background-color 1s ease-out 1s;
-moz-transition: background-color 1s ease-out 1s;
-o-transition: background-color 1s ease-out 1s;
transition: background-color 1s ease-out 1s;
}
.checkbox_red label:after {
position: absolute;
bottom: 8px;
width: 18px;
height: 10px;
opacity: 0;
content: '';
background: transparent;
border: 3px solid #000;
border-top: none;
border-right: none;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-ms-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.checkbox_red input[type=checkbox] {
visibility: hidden;
}
.checkbox_red input[type=checkbox]:checked + label:after {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
}
试试这个。。我希望你能找到解决问题的办法
<div class="checkbox_red">
<input type="checkbox" value="none" id="checkbox_red1" name="check">
<label for="checkbox_red1"></label>
</div>
*******html
(绿色)
(红色)
(紫色)
********javascript
$(函数(){
$('input[type=checkbox]')。每个(函数(){
变量span=$('')。单击(多切克)。鼠标向下(多道)。鼠标向下(多道);
如果($(this).is(':checked')){
span.addClass('checked');
}
$(this.wrap(span.hide());
});
函数doCheck(){
if($(this).hasClass('checked')){
$(this.removeClass('checked');
$(this.children().prop(“选中”,false);
}否则{
$(this.addClass('checked');
$(this.children().prop(“选中”,true);
}
}
函数doDown(){
$(this.addClass('clicked');
}
函数doUp(){
$(this.removeClass('clicked');
}
});
****css
.复选框,.收音机{
宽度:19px;
高度:20px;
填充:0px;
背景:url(“http://i48.tinypic.com/raz13m.jpg");
显示:块;
清除:左;
浮动:左;
}
.检查{
背景位置:0px-50px;
}
.点击{
背景位置:0px-25px;
}
.点击{
背景位置:0px-75px;
}
格林先生{
背景颜色:绿色;
}
瑞德先生{
背景色:红色;
}
紫色{
背景颜色:紫色;
}
如果您使用的是CSS3,请使用选择器“:checked”像这样#partoption2:checkedI建议隐藏此复选框并改用sprite map,所有浏览器和操作系统中的复选框外观都相同。设置表单元素的样式不是一个好主意,因为您将面临许多问题(mac和windows、FF、Chrome、Safari、IE和其他浏览器)。您是否在寻找可能的重复项?您不能更改复选框和单选按钮的外观,但您可以执行以下操作:,
<div class="checkbox_red">
<input type="checkbox" value="none" id="checkbox_red1" name="check">
<label for="checkbox_red1"></label>
</div>
******html
<p><input type="checkbox" name="1" class="styled green"/> (green)</p>
<p><input type="checkbox" name="2" class="styled red" checked/> (red)</p>
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p>
********javascript
$(function() {
$('input[type=checkbox]').each(function() {
var span = $('<span class="' + $(this).attr('type') + ' ' + $(this).attr('class') + '"></span>').click(doCheck).mousedown(doDown).mouseup(doUp);
if ($(this).is(':checked')) {
span.addClass('checked');
}
$(this).wrap(span).hide();
});
function doCheck() {
if ($(this).hasClass('checked')) {
$(this).removeClass('checked');
$(this).children().prop("checked", false);
} else {
$(this).addClass('checked');
$(this).children().prop("checked", true);
}
}
function doDown() {
$(this).addClass('clicked');
}
function doUp() {
$(this).removeClass('clicked');
}
});
****css
.checkbox, .radio {
width: 19px;
height: 20px;
padding: 0px;
background: url("http://i48.tinypic.com/raz13m.jpg");
display: block;
clear: left;
float: left;
}
.checked {
background-position: 0px -50px;
}
.clicked {
background-position: 0px -25px;
}
.clicked.checked {
background-position: 0px -75px;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
.purple {
background-color: purple;
}