我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
当前回答
<!DOCTYPE html>
<html>
<style>
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: white;
border: 2px solid red;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the checkbox is checked, add a white background */
.container input:checked ~ .checkmark {
background-color: white;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.container .checkmark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid green;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<h1>Custom Checkboxes</h1>
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="checkbox">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="checkbox">
<span class="checkmark"></span>
</label>
</body>
</html>
其他回答
这是一个简单的CSS解决方案,没有任何jQuery或JavaScript代码。
我使用FontAwseome图标,但你可以使用任何图像
input[type=checkbox] {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
visibility: hidden;
font-size: 14px;
}
input[type=checkbox]:before {
content: @fa-var-square-o;
visibility: visible;
/*font-size: 12px;*/
}
input[type=checkbox]:checked:before {
content: @fa-var-check-square-o;
}
使用纯CSS修改复选框样式。这不需要任何JavaScript或HTML操作:
.form input[type="checkbox"]:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; content: "\f096"; opacity: 1 !important; margin-top: -25px; appearance: none; background: #fff; } .form input[type="checkbox"]:checked:before { content: "\f046"; } .form input[type="checkbox"] { font-size: 22px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <form class="form"> <input type="checkbox" /> </form>
不需要JavaScript或jQuery。
简单地改变你的复选框样式。
input[type="checkbox"] { display: none; border: none !important; box-shadow: none !important; } input[type="checkbox"] + label span { background: url(http://imgh.us/uncheck.png); width: 49px; height: 49px; display: inline-block; vertical-align: middle; } input[type="checkbox"]:checked + label span { background: url(http://imgh.us/check_2.png); width: 49px; height: 49px; vertical-align: middle; } <input type="checkbox" id="option" /> <label for="option"> <span></span> Click me </label>
这是一个JSFiddle链接
下面是一个带有主题支持的示例。这是一种现代的CSS转换方法。绝对不需要JavaScript。
我得到了下面的代码链接在这条评论;在一个相关问题上。
编辑:我添加了单选按钮,maxshuty建议。
const selector = '.grid-container > .grid-row > .grid-col[data-theme="retro"]'; const main = () => { new CheckboxStyler().run(selector); new RadioStyler().run(selector); }; /* * This is only used to add the wrapper class and checkmark span to an existing DOM, * to make this CSS work. */ class AbstractInputStyler { constructor(options) { this.opts = options; } run(parentSelector) { let wrapperClass = this.opts.wrapperClass; let parent = document.querySelector(parentSelector) || document.getElementsByTagName('body')[0]; let labels = parent.querySelectorAll('label'); if (labels.length) labels.forEach(label => { if (label.querySelector(`input[type="${this.opts._inputType}"]`)) { if (!label.classList.contains(wrapperClass)) { label.classList.add(wrapperClass); label.appendChild(this.__createDefaultNode()); } } }); return this; } /* @protected */ __createDefaultNode() { let checkmark = document.createElement('span'); checkmark.className = this.opts._activeClass; return checkmark; } } class CheckboxStyler extends AbstractInputStyler { constructor(options) { super(Object.assign({ _inputType: 'checkbox', _activeClass: 'checkmark' }, CheckboxStyler.defaultOptions, options)); } } CheckboxStyler.defaultOptions = { wrapperClass: 'checkbox-wrapper' }; class RadioStyler extends AbstractInputStyler { constructor(options) { super(Object.assign({ _inputType: 'radio', _activeClass: 'pip' }, RadioStyler.defaultOptions, options)); } } RadioStyler.defaultOptions = { wrapperClass: 'radio-wrapper' }; main(); /* Theming */ :root { --background-color: #FFF; --font-color: #000; --checkbox-default-background: #EEE; --checkbox-hover-background: #CCC; --checkbox-disabled-background: #AAA; --checkbox-selected-background: #1A74BA; --checkbox-selected-disabled-background: #6694B7; --checkbox-checkmark-color: #FFF; --checkbox-checkmark-disabled-color: #DDD; } [data-theme="dark"] { --background-color: #111; --font-color: #EEE; --checkbox-default-background: #222; --checkbox-hover-background: #444; --checkbox-disabled-background: #555; --checkbox-selected-background: #2196F3; --checkbox-selected-disabled-background: #125487; --checkbox-checkmark-color: #EEE; --checkbox-checkmark-disabled-color: #999; } [data-theme="retro"] { --background-color: #FFA; --font-color: #000; --checkbox-default-background: #EEE; --checkbox-hover-background: #FFF; --checkbox-disabled-background: #BBB; --checkbox-selected-background: #EEE; --checkbox-selected-disabled-background: #BBB; --checkbox-checkmark-color: #F44; --checkbox-checkmark-disabled-color: #D00; } /* General styles */ html { width: 100%; height: 100%; } body { /*background: var(--background-color); -- For demo, moved to column. */ /*color: var(--font-color); -- For demo, moved to column. */ background: #777; width: calc(100% - 0.5em); height: calc(100% - 0.5em); padding: 0.25em; } h1 { font-size: 1.33em !important; } h2 { font-size: 1.15em !important; margin-top: 1em; } /* Grid style - using flex */ .grid-container { display: flex; height: 100%; flex-direction: column; flex: 1; } .grid-row { display: flex; flex-direction: row; flex: 1; margin: 0.25em 0; } .grid-col { display: flex; flex-direction: column; height: 100%; padding: 0 1em; flex: 1; margin: 0 0.25em; /* If not demo, remove and uncomment the body color rules */ background: var(--background-color); color: var(--font-color); } .grid-cell { width: 100%; height: 100%; } /* The checkbox wrapper */ .checkbox-wrapper, .radio-wrapper { display: block; position: relative; padding-left: 1.5em; margin-bottom: 0.5em; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Hide the browser's default checkbox and radio buttons */ .checkbox-wrapper input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } .radio-wrapper input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; } /* Create a custom checkbox */ .checkbox-wrapper .checkmark { position: absolute; top: 0; left: 0; height: 1em; width: 1em; background-color: var(--checkbox-default-background); transition: all 0.2s ease-in; } .radio-wrapper .pip { position: absolute; top: 0; left: 0; height: 1em; width: 1em; border-radius: 50%; background-color: var(--checkbox-default-background); transition: all 0.2s ease-in; } /* Disabled style */ .checkbox-wrapper input[type="checkbox"]:disabled~.checkmark, .radio-wrapper input[type="radio"]:disabled~.pip { cursor: not-allowed; background-color: var(--checkbox-disabled-background); color: var(--checkbox-checkmark-disabled-color); } .checkbox-wrapper input[type="checkbox"]:disabled~.checkmark:after, .radio-wrapper input[type="radio"]:disabled~.pip:after { color: var(--checkbox-checkmark-disabled-color); } .checkbox-wrapper input[type="checkbox"]:disabled:checked~.checkmark, .radio-wrapper input[type="radio"]:disabled:checked~.pip { background-color: var(--checkbox-selected-disabled-background); } /* On mouse-over, add a grey background color */ .checkbox-wrapper:hover input[type="checkbox"]:not(:disabled):not(:checked)~.checkmark, .radio-wrapper:hover input[type="radio"]:not(:disabled):not(:checked)~.pip { background-color: var(--checkbox-hover-background); } /* When the checkbox is checked, add a blue background */ .checkbox-wrapper input[type="checkbox"]:checked~.checkmark, .radio-wrapper input[type="radio"]:checked~.pip { background-color: var(--checkbox-selected-background); } /* Create the checkmark/indicator (hidden when not checked) */ .checkbox-wrapper .checkmark:after { display: none; width: 100%; position: absolute; text-align: center; content: "\2713"; color: var(--checkbox-checkmark-color); line-height: 1.1em; } .radio-wrapper .pip:after { display: none; width: 100%; position: absolute; text-align: center; content: "\2022"; color: var(--checkbox-checkmark-color); font-size: 1.5em; top: -0.2em; } /* Show the checkmark when checked */ .checkbox-wrapper input[type="checkbox"]:checked~.checkmark:after { display: block; line-height: 1.1em; } .radio-wrapper input[type="radio"]:checked~.pip:after { display: block; line-height: 1.1em; } <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" /> <div class="grid-container"> <div class="grid-row"> <div class="grid-col"> <div class="grid-cell"> <h1>Pure CSS</h1> <h2>Checkbox</h2> <label class="checkbox-wrapper">One <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> <label class="checkbox-wrapper">Two <input type="checkbox"> <span class="checkmark"></span> </label> <label class="checkbox-wrapper">Three <input type="checkbox" checked disabled> <span class="checkmark"></span> </label> <label class="checkbox-wrapper">Four <input type="checkbox" disabled> <span class="checkmark"></span> </label> <h2>Radio</h2> <label class="radio-wrapper">One <input type="radio" name="group-x"> <span class="pip"></span> </label> <label class="radio-wrapper">Two <input type="radio" name="group-x"> <span class="pip"></span> </label> <label class="radio-wrapper">Three <input type="radio" name="group-x" checked disabled> <span class="pip"></span> </label> <label class="radio-wrapper">Four <input type="radio" name="group-x" disabled> <span class="pip"></span> </label> </div> </div> <div class="grid-col" data-theme="dark"> <div class="grid-cell"> <h1>Pure CSS</h1> <h2>Checkbox</h2> <label class="checkbox-wrapper">One <input type="checkbox" checked="checked"> <span class="checkmark"></span> </label> <label class="checkbox-wrapper">Two <input type="checkbox"> <span class="checkmark"></span> </label> <label class="checkbox-wrapper">Three <input type="checkbox" checked disabled> <span class="checkmark"></span> </label> <label class="checkbox-wrapper">Four <input type="checkbox" disabled> <span class="checkmark"></span> </label> <h2>Radio</h2> <label class="radio-wrapper">One <input type="radio" name="group-y"> <span class="pip"></span> </label> <label class="radio-wrapper">Two <input type="radio" name="group-y"> <span class="pip"></span> </label> <label class="radio-wrapper">Three <input type="radio" name="group-y" checked disabled> <span class="pip"></span> </label> <label class="radio-wrapper">Four <input type="radio" name="group-y" disabled> <span class="pip"></span> </label> </div> </div> <div class="grid-col" data-theme="retro"> <div class="grid-cell"> <h1>JS + CSS</h1> <h2>Checkbox</h2> <label>One <input type="checkbox" checked="checked"></label> <label>Two <input type="checkbox"></label> <label>Three <input type="checkbox" checked disabled></label> <label>Four <input type="checkbox" disabled></label> <h2>Radio</h2> <label>One <input type="radio" name="group-z" checked="checked"></label> <label>Two <input type="radio" name="group-z"></label> <label>Three <input type="radio" name="group-z" checked disabled></label> <label>Four <input type="radio" name="group-z" disabled></label> </div> </div> </div> </div>
呵!所有这些变通方法让我得出结论,如果你想要设置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中奇怪的事件处理模型。
我希望这能帮助到一些人;它绝对符合我的需要。