我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
当前回答
通过使用:after和:before伪类附带的新功能，可以实现相当酷的自定义复选框效果。这样做的好处是:您不需要向DOM添加任何其他内容，只需添加标准复选框即可。
注意，这只适用于兼容的浏览器。我相信这与一些浏览器不允许你在输入元素上设置:after和:before有关。不幸的是，目前只支持WebKit浏览器。Firefox + Internet Explorer仍然允许复选框发挥作用，只是没有样式，这在未来有望改变(代码不使用供应商前缀)。
这是一个WebKit浏览器解决方案(Chrome, Safari，移动浏览器)
参见小提琴
$(function() { $('input').change(function() { $('div').html(Math.random()); }); }); /* Main Classes */ .myinput[type="checkbox"]:before { position: relative; display: block; width: 11px; height: 11px; border: 1px solid #808080; content: ""; background: #FFF; } .myinput[type="checkbox"]:after { position: relative; display: block; left: 2px; top: -11px; width: 7px; height: 7px; border-width: 1px; border-style: solid; border-color: #B3B3B3 #dcddde #dcddde #B3B3B3; content: ""; background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%); background-repeat: no-repeat; background-position: center; } .myinput[type="checkbox"]:checked:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%); } .myinput[type="checkbox"]:disabled:after { -webkit-filter: opacity(0.4); } .myinput[type="checkbox"]:not(:disabled):checked:hover:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%); } .myinput[type="checkbox"]:not(:disabled):hover:after { background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%); border-color: #85A9BB #92C2DA #92C2DA #85A9BB; } .myinput[type="checkbox"]:not(:disabled):hover:before { border-color: #3D7591; } /* Large checkboxes */ .myinput.large { height: 22px; width: 22px; } .myinput.large[type="checkbox"]:before { width: 20px; height: 20px; } .myinput.large[type="checkbox"]:after { top: -20px; width: 16px; height: 16px; } /* Custom checkbox */ .myinput.large.custom[type="checkbox"]:checked:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%); } .myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table style="width:100%"> <tr> <td>Normal:</td> <td><input type="checkbox" /></td> <td><input type="checkbox" checked="checked" /></td> <td><input type="checkbox" disabled="disabled" /></td> <td><input type="checkbox" disabled="disabled" checked="checked" /></td> </tr> <tr> <td>Small:</td> <td><input type="checkbox" class="myinput" /></td> <td><input type="checkbox" checked="checked" class="myinput" /></td> <td><input type="checkbox" disabled="disabled" class="myinput" /></td> <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td> </tr> <tr> <td>Large:</td> <td><input type="checkbox" class="myinput large" /></td> <td><input type="checkbox" checked="checked" class="myinput large" /></td> <td><input type="checkbox" disabled="disabled" class="myinput large" /></td> <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td> </tr> <tr> <td>Custom icon:</td> <td><input type="checkbox" class="myinput large custom" /></td> <td><input type="checkbox" checked="checked" class="myinput large custom" /></td> <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td> <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td> </tr> </table>
奖金Webkit风格的翻转开关小提琴
$(function() { var f = function() { $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)'); }; $('input').change(f).trigger('change'); }); body { font-family: arial; } .flipswitch { position: relative; background: white; width: 120px; height: 40px; -webkit-appearance: initial; border-radius: 3px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); outline: none; font-size: 14px; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; cursor: pointer; border: 1px solid #ddd; } .flipswitch:after { position: absolute; top: 5%; display: block; line-height: 32px; width: 45%; height: 90%; background: #fff; box-sizing: border-box; text-align: center; transition: all 0.3s ease-in 0s; color: black; border: #888 1px solid; border-radius: 3px; } .flipswitch:after { left: 2%; content: "OFF"; } .flipswitch:checked:after { left: 53%; content: "ON"; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <h2>Webkit friendly mobile-style checkbox/flipswitch</h2> <input type="checkbox" class="flipswitch" /> <span></span> <br> <input type="checkbox" checked="checked" class="flipswitch" /> <span></span>
其他回答
实现简单，易于定制的解决方案
经过大量的搜索和测试，我得到了这个解决方案，它是简单的实现和更容易定制。在此解决方案中:
您不需要外部库和文件 你不需要加 在页面中添加额外的HTML 您不需要更改复选框名称 和id
简单地把流动的CSS放在你的页面顶部，所有的复选框样式将像这样改变:
input[type=checkbox] { transform: scale(1.5); } input[type=checkbox] { width: 30px; height: 30px; margin-right: 8px; cursor: pointer; font-size: 17px; visibility: hidden; } input[type=checkbox]:after, input[type=checkbox]::after { content: " "; background-color: #fff; display: inline-block; margin-left: 10px; padding-bottom: 5px; color: #00BFF0; width: 22px; height: 25px; visibility: visible; border: 1px solid #00BFF0; padding-left: 3px; border-radius: 5px; } input[type=checkbox]:checked:after, input[type=checkbox]:checked::after { content: "\2714"; padding: -5px; font-weight: bold; } <input type="checkbox" id="checkbox1" /> <label for="checkbox1">Checkbox</label>
呵!所有这些变通方法让我得出结论，如果你想要设置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中奇怪的事件处理模型。
我希望这能帮助到一些人;它绝对符合我的需要。
这将使虚线边界，以及背景你寻找，同样，如果你想设置一个特定的背景颜色，当勾选时，简单地设置它在适当的地方为你的问题:) 这个解决方案还设置了一个自定义的复选标记图标等。
对于像这样的HTML元素: <input type="checkbox" />
input[type='checkbox']:checked {
background-color: rgb(60,69,77,0.9);
}
input[type='checkbox']:checked:after {
content: '\2713';
color:white;
}
input[type='checkbox']{
background:#ff0000;
text-align: center;
display: table-cell;
vertical-align: middle;
width: 20px !important;
height: 20px !important;
appearance:none;
border-radius:10%;
border: 1px dotted rgb(60,69,77,0.9);
box-shadow: none;
font-size: 1em;
}
开始之前(截至2015年1月)
最初的问题和答案现在已经有5年的历史了。因此，这是一个小小的更新。
首先，当涉及到样式化复选框时，有许多方法。基本宗旨是:
你需要隐藏默认的复选框控件，它是由你的浏览器设置的，并且不能使用CSS以任何有意义的方式覆盖。 在控件隐藏的情况下，您仍然需要能够检测并切换其已选中的状态。 复选框的选中状态需要通过样式化一个新元素来反映。
解决方案(原则上)
上面的任务可以通过许多方法来完成——您经常会听到使用CSS3伪元素是正确的方法。实际上，没有真正的正确或错误的方法，它取决于最适合您将在其中使用它的上下文的方法。也就是说，我有一个更喜欢的。
将复选框包装在标签元素中。这意味着即使它被隐藏，您仍然可以通过单击标签内的任何位置来切换其已检查状态。 隐藏你的复选框。 在复选框后添加一个新元素，您将相应地设置它的样式。它必须出现在复选框之后，以便使用CSS选择它，并根据:checked状态设置样式。CSS不能选择“向后”。
解决方案(代码形式)
label input { visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */ display: block; height: 0; width: 0; position: absolute; overflow: hidden; } label span {/* <-- Style the artificial checkbox */ height: 10px; width: 10px; border: 1px solid grey; display: inline-block; } [type=checkbox]:checked + span {/* <-- Style its checked state */ background: black; } <label> <input type='checkbox'> <span></span> Checkbox label text </label>
细化(使用图标)
“但是嘿!”我听见你在喊。如果我想在盒子里画一个漂亮的勾号或叉号呢?而且我不想使用背景图片!
这就是CSS3的伪元素可以发挥作用的地方。它们支持content属性，该属性允许您注入表示任一状态的Unicode图标。或者，你也可以使用第三方字体图标源，如font awesome(但要确保你也设置了相关的字体家族，例如FontAwesome)
标签输入{ 显示:没有;/*隐藏默认复选框*/ ｝ /*设置人工复选框*/ 标签跨度{ 高度:10 px; 宽度:10 px; 边框:1px纯灰色; 显示:inline-block; 位置:相对; ｝ /*样式它的checked状态…带有标记图标*/ [type=checkbox]:已检查+ span:before { 内容:“2714 \”; 位置:绝对的; 上图:5 px; 左:0; ｝ <标识> <输入类型=“复选框”> < span > < / span > 复选框标签文本 < / >标签
一个简单而轻量级的模板:
input[type=checkbox] { cursor: pointer; } input[type=checkbox]:checked:before { content: "\2713"; background: #fffed5; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 20px; text-align: center; line-height: 8px; display: inline-block; width: 13px; height: 15px; color: #00904f; border: 1px solid #cdcdcd; border-radius: 4px; margin: -3px -3px; text-indent: 1px; } input[type=checkbox]:before { content: "\202A"; background: #ffffff; text-shadow: 1px 1px 1px rgba(0, 0, 0, .2); font-size: 20px; text-align: center; line-height: 8px; display: inline-block; width: 13px; height: 15px; color: #00904f; border: 1px solid #cdcdcd; border-radius: 4px; margin: -3px -3px; text-indent: 1px; } <input type="checkbox" checked="checked">checked1<br> <input type="checkbox">unchecked2<br> <input type="checkbox" checked="checked" id="id1"> <label for="id1">checked2+label</label><br> <label for="id2">unchecked2+label+rtl</label> <input type="checkbox" id="id2"> <br>
https://jsfiddle.net/rvgccn5b/
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 如何停止事件冒泡复选框点击
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
