我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
当前回答
CSS基本用户界面模块第4级(最终)通过一个叫做重音-颜色的新解决方案增加了对这一点的支持,它实际上非常简单,不像这里的其他答案:
输入{ 强调色:rebeccapurple; } <input type="checkbox" />
简单地设置任何CSS颜色(例如命名值,十六进制代码等)你想作为重音颜色的值,它将被应用。
这目前工作在Chrome (v93+), Edge (v93+), Firefox (v92+), Opera (v79+)和Safari (v15.4+)。
注意:Edge, Chrome和Opera(可能还有Safari;我不能测试)目前也不支持通过rgba()的alpha通道值(rgba()的RGB值仍将“工作”;alpha通道将被浏览器忽略)。有关更多信息,请参阅MDN浏览器支持。
其他回答
通过使用: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>
不,你仍然不能设置复选框本身的样式,但我(最终)想出了如何在保持单击复选框的功能的同时设置一个错觉的样式。这意味着即使光标不是完全静止,你也可以切换它,而不用冒险选择文本或触发拖放!
这个解决方案可能也适用于单选按钮。
以下内容在ie9、Firefox 30.0和Chrome 40.0.2214.91中都可以使用,这只是一个基本示例。您仍然可以将它与背景图像和伪元素结合使用。
http://jsfiddle.net/o0xo13yL/1/
label {
display: inline-block;
position: relative; /* Needed for checkbox absolute positioning */
background-color: #eee;
padding: .5rem;
border: 1px solid #000;
border-radius: .375rem;
font-family: "Courier New";
font-size: 1rem;
line-height: 1rem;
}
label > input[type="checkbox"] {
display: block;
position: absolute; /* Remove it from the flow */
width: 100%;
height: 100%;
margin: -.5rem; /* Negative the padding of label to cover the "button" */
cursor: pointer;
opacity: 0; /* Make it transparent */
z-index: 666; /* Place it on top of everything else */
}
label > input[type="checkbox"] + span {
display: inline-block;
width: 1rem;
height: 1rem;
border: 1px solid #000;
margin-right: .5rem;
}
label > input[type="checkbox"]:checked + span {
background-color: #666;
}
<label>
<input type="checkbox" />
<span> </span>Label text
</label>
现在只使用CSS就可以改变所有复选框的颜色:
如前所述,当选中复选框时,最近的重音颜色CSS属性用于更改复选框的颜色。 然而,我没有看到其他人提到的是,当复选框未选中时,如果你使用CSS的过滤器属性,你可以改变背景颜色和/或边界。
对于简单的更改,您可以使用亮度将白色背景颜色变深为灰色或黑色,并使用色调旋转可以为边界赋予颜色(至少在Firefox中是这样)。然而,如果你想完全改变背景为任何颜色,你也可以用滤镜来做到这一点,但你必须做一些技巧,你将多个滤镜组合在一起,基于这个问题的方法:如何仅使用CSS滤镜将黑色转换为任何给定的颜色
幸运的是,这种复杂的方法似乎在所有浏览器中都有效,并且您可以使用生成器来计算所需的过滤器:https://codepen.io/jumarjuaton/full/mdJYWYq (这个链接是从白色转换而来的,不像上面链接的问题)
请看下面的例子:
/* Disable 'filters' while checked since they impact 'accent-color'. */ input[type='checkbox']:checked { filter: none; } input[type='radio']:checked { filter: none; } /** * We use 'accent-color' for colors in the checked stated and we use * 'filter' to change the background colors in the unchecked state. */ .red-bg-input { accent-color: red; filter: invert(85%) sepia(83%) saturate(6726%) hue-rotate(360deg) brightness(111%) contrast(111%); } .green-bg-input { accent-color: green; filter: invert(49%) sepia(65%) saturate(7149%) hue-rotate(92deg) brightness(89%) contrast(103%); } .blue-bg-input { accent-color: blue; filter: invert(30%) sepia(99%) saturate(6101%) hue-rotate(202deg) brightness(52%) contrast(136%); } .teal-bg-input { accent-color: teal; filter: invert(58%) sepia(77%) saturate(3139%) hue-rotate(157deg) brightness(89%) contrast(101%) } .dark-input { accent-color: black; filter: brightness(0%) saturate(100) hue-rotate(25deg); } .gray-input { accent-color: purple; filter: brightness(60%) saturate(100) hue-rotate(25deg); } .orange-bg-input { accent-color: orange; filter: invert(63%) sepia(28%) saturate(7249%) hue-rotate(0deg) brightness(103%) contrast(105%); } <input type="checkbox" /> <input type="checkbox" checked/> <input type="radio" /> <input type="radio" checked /> Defaults <br> <input class="red-bg-input" type="checkbox" /> <input class="red-bg-input" type="checkbox" checked/> <input class="red-bg-input" type="radio" /> <input class="red-bg-input" type="radio" checked/> Red <br> <input class="green-bg-input" type="checkbox" /> <input class="green-bg-input" type="checkbox" checked/> <input class="green-bg-input" type="radio" /> <input class="green-bg-input" type="radio" checked/> Green <br> <input class="blue-bg-input" type="checkbox" /> <input class="blue-bg-input" type="checkbox" checked/> <input class="blue-bg-input" type="radio" /> <input class="blue-bg-input" type="radio" checked/> Blue <br> <input class="teal-bg-input" type="checkbox" /> <input class="teal-bg-input" type="checkbox" checked/> <input class="teal-bg-input" type="radio" /> <input class="teal-bg-input" type="radio" checked/> Teal <br> <input class="orange-bg-input" type="checkbox" /> <input class="orange-bg-input" type="checkbox" checked/> <input class="orange-bg-input" type="radio" /> <input class="orange-bg-input" type="radio" checked/> Orange <br> <input class="dark-input" type="checkbox" /> <input class="dark-input" type="checkbox" checked/> <input class="dark-input" type="radio" /> <input class="dark-input" type="radio" checked/> Black/dark <br> <input class="gray-input" type="checkbox" /> <input class="gray-input" type="checkbox" checked/> <input class="gray-input" type="radio" /> <input class="gray-input" type="radio" checked/> Purple + Gray background
下面是一个带有主题支持的示例。这是一种现代的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>
最近我发现了一个很有趣的解决方法。
你可以用appearance: none;关闭复选框的默认样式,然后像这里描述的那样在上面写你自己的样式(例4)。
input[type=checkbox] { width: 23px; height: 23px; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-right: 10px; background-color: #878787; outline: 0; border: 0; display: inline-block; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } input[type=checkbox]:focus { outline: none; border: none !important; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; } input[type=checkbox]:checked { background-color: green; text-align: center; line-height: 15px; } <input type="checkbox">
不幸的是,浏览器对外观选项的支持很差。从我的个人测试来看,我只有Opera和Chrome可以正常工作。但是当更好的支持到来或者你只想使用Chrome/Opera时,这将是保持简单的方式。
例子JSFiddle
“我能用吗?”链接