我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
当前回答
我的解决方案
input[type="checkbox"] { cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background: lightgray; height: 16px; width: 16px; border: 1px solid white; } input[type="checkbox"]:checked { background: #2aa1c0; } input[type="checkbox"]:hover { filter: brightness(90%); } input[type="checkbox"]:disabled { background: #e6e6e6; opacity: 0.6; pointer-events: none; } input[type="checkbox"]:after { content: ''; position: relative; left: 40%; top: 20%; width: 15%; height: 40%; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); display: none; } input[type="checkbox"]:checked:after { display: block; } input[type="checkbox"]:disabled:after { border-color: #7b7b7b; } <input type="checkbox"><br> <input type="checkbox" checked><br> <input type="checkbox" disabled><br> <input type="checkbox" disabled checked><br>
其他回答
这是一个现代版本,有一点动画,和简单的样式,你可以自定义:
.checkbox {
position: relative;
width: 20px;
height: 20px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background: transparent;
border: 2px solid #7C7A7D;
border-radius: 5px;
margin: 0;
outline: none;
transition: 0.5s ease;
opacity: 0.8;
cursor: pointer;
}
.checkbox:checked {
border-color: #7C7A7D;
background-color: #7C7A7D;
}
.checkbox:checked:before {
position: absolute;
left: 2px;
top: -4px;
display: block;
content: '\2713';
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 14px;
font-weight: 800;
}
.checkbox:hover {
opacity: 1.0;
transform: scale(1.05);
}
我认为最简单的方法是通过样式化标签并使复选框不可见。
HTML
<input type="checkbox" id="first" />
<label for="first"> </label>
CSS
checkbox {
display: none;
}
checkbox + label {
/* Style for checkbox normal */
width: 16px;
height: 16px;
}
checkbox::checked + label,
label.checked {
/* Style for checkbox checked */
}
复选框,即使它是隐藏的,仍然是可访问的,它的值将在提交表单时发送。对于旧的浏览器,您可能必须使用JavaScript将标签的类更改为checked,因为我认为旧版本的Internet Explorer不理解复选框上的::checked。
呵!所有这些变通方法让我得出结论,如果你想要设置HTML复选框的样式,那么它就很糟糕。
作为一个警告,这不是一个CSS实现。我只是想分享一下我想出的解决办法以防其他人会觉得有用。
我使用HTML5 canvas元素。
这样做的好处是您不必使用外部图像,并且可能节省一些带宽。
缺点是,如果浏览器由于某种原因不能正确地呈现它,那么就没有退路了。不过,在2017年,这是否仍然是一个值得商榷的问题。
更新
我发现旧的代码很难看,所以我决定重写一遍。
Object.prototype.create = function(args){
var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;
}
var Checkbox = Object.seal({
width: 0,
height: 0,
state: 0,
document: null,
parent: null,
canvas: null,
ctx: null,
/*
* args:
* name default desc.
*
* width 15 width
* height 15 height
* document window.document explicit document reference
* target this.document.body target element to insert checkbox into
*/
constructor: function(args){
if(args === null)
args = {};
this.width = args.width || 15;
this.height = args.height || 15;
this.document = args.document || window.document;
this.parent = args.target || this.document.body;
this.canvas = this.document.createElement("canvas");
this.ctx = this.canvas.getContext('2d');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.addEventListener("click", this.ev_click(this), false);
this.parent.appendChild(this.canvas);
this.draw();
},
ev_click: function(self){
return function(unused){
self.state = !self.state;
self.draw();
}
},
draw_rect: function(color, offset){
this.ctx.fillStyle = color;
this.ctx.fillRect(offset, offset,
this.width - offset * 2, this.height - offset * 2);
},
draw: function(){
this.draw_rect("#CCCCCC", 0);
this.draw_rect("#FFFFFF", 1);
if(this.is_checked())
this.draw_rect("#000000", 2);
},
is_checked: function(){
return !!this.state;
}
});
这里是一个工作演示。
新版本使用原型和差分继承来创建一个用于创建复选框的高效系统。创建复选框:
var my_checkbox = Checkbox.create();
这将立即将复选框添加到DOM并连接事件。查询复选框是否勾选。
my_checkbox.is_checked(); // True if checked, else false
同样需要注意的是,我去掉了循环。
更新2
在上次更新中我忽略了一点,那就是使用canvas比仅仅创建一个你想要的复选框有更多的优势。如果您愿意,还可以创建多状态复选框。
Object.prototype.create = function(args){
var retobj = Object.create(this);
retobj.constructor(args || null);
return retobj;
}
Object.prototype.extend = function(newobj){
var oldobj = Object.create(this);
for(prop in newobj)
oldobj[prop] = newobj[prop];
return Object.seal(oldobj);
}
var Checkbox = Object.seal({
width: 0,
height: 0,
state: 0,
document: null,
parent: null,
canvas: null,
ctx: null,
/*
* args:
* name default desc.
*
* width 15 width
* height 15 height
* document window.document explicit document reference
* target this.document.body target element to insert checkbox into
*/
constructor: function(args){
if(args === null)
args = {};
this.width = args.width || 15;
this.height = args.height || 15;
this.document = args.document || window.document;
this.parent = args.target || this.document.body;
this.canvas = this.document.createElement("canvas");
this.ctx = this.canvas.getContext('2d');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.addEventListener("click", this.ev_click(this), false);
this.parent.appendChild(this.canvas);
this.draw();
},
ev_click: function(self){
return function(unused){
self.state = !self.state;
self.draw();
}
},
draw_rect: function(color, offsetx, offsety){
this.ctx.fillStyle = color;
this.ctx.fillRect(offsetx, offsety,
this.width - offsetx * 2, this.height - offsety * 2);
},
draw: function(){
this.draw_rect("#CCCCCC", 0, 0);
this.draw_rect("#FFFFFF", 1, 1);
this.draw_state();
},
draw_state: function(){
if(this.is_checked())
this.draw_rect("#000000", 2, 2);
},
is_checked: function(){
return this.state == 1;
}
});
var Checkbox3 = Checkbox.extend({
ev_click: function(self){
return function(unused){
self.state = (self.state + 1) % 3;
self.draw();
}
},
draw_state: function(){
if(this.is_checked())
this.draw_rect("#000000", 2, 2);
if(this.is_partial())
this.draw_rect("#000000", 2, (this.height - 2) / 2);
},
is_partial: function(){
return this.state == 2;
}
});
我稍微修改了上一个代码片段中使用的复选框,使其更通用,从而可以使用具有3个状态的复选框“扩展”它。这是一个演示。正如您所看到的,它已经拥有了比内置复选框更多的功能。
在JavaScript和CSS之间进行选择时需要考虑的问题。
旧的、设计糟糕的代码
演示工作
首先,设置一个画布
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode(' Togglable Option'));
接下来,设计一种让画布自我更新的方法。
(function loop(){
// Draws a border
ctx.fillStyle = '#ccc';
ctx.fillRect(0,0,15,15);
ctx.fillStyle = '#fff';
ctx.fillRect(1, 1, 13, 13);
// Fills in canvas if checked
if(checked){
ctx.fillStyle = '#000';
ctx.fillRect(2, 2, 11, 11);
}
setTimeout(loop, 1000/10); // Refresh 10 times per second
})();
最后一部分是使其具有互动性。幸运的是,这很简单:
canvas.onclick = function(){
checked = !checked;
}
这就是你在IE中可能会遇到的问题,因为JavaScript中奇怪的事件处理模型。
我希望这能帮助到一些人;它绝对符合我的需要。
你可以使用iCheck。它是为jQuery和Zepto定制的复选框和单选按钮,也许它会对您有所帮助。
确保在iccheck .js之前加载jQuery v1.7+
Choose a color scheme, there are 10 different styles available: Black — minimal.css Red — red.css Green — green.css Blue — blue.css Aero — aero.css Grey — grey.css Orange — orange.css Yellow — yellow.css Pink — pink.css Purple — purple.css Copy /skins/minimal/ folder and icheck.js file to your site. Insert before in your HTML (replace your-path and color-scheme): <link href="your-path/minimal/color-scheme.css" rel="stylesheet"> <script src="your-path/icheck.js"></script> Example for a Red color scheme: <link href="your-path/minimal/red.css" rel="stylesheet"> <script src="your-path/icheck.js"></script> Add some checkboxes and radio buttons to your HTML: <input type="checkbox"> <input type="checkbox" checked> <input type="radio" name="iCheck"> <input type="radio" name="iCheck" checked> Add JavaScript to your HTML to launch iCheck plugin: <script> $(document).ready(function(){ $('input').iCheck({ checkboxClass: 'icheckbox_minimal', radioClass: 'iradio_minimal', increaseArea: '20%' // Optional }); }); </script> For different from black color schemes use this code (example for Red): <script> $(document).ready(function(){ $('input').iCheck({ checkboxClass: 'icheckbox_minimal-red', radioClass: 'iradio_minimal-red', increaseArea: '20%' // Optional }); }); </script> Done
警告:在撰写本文时,以下内容是正确的,但与此同时,事情有了进展。
AFAIK现代浏览器使用本机操作系统控件显示复选框,所以没有办法对它们进行样式化。