CSScheckboxinput样式

任何input风格都会影响每个input元素。 有没有一种方法可以指定样式来仅应用checkbox，而无需将类应用于每个checkbox元素？

Answer 1

用CSS 2你可以这样做：

 input[type='checkbox'] { ... } 

这应该是相当广泛的支持，现在..要看到浏览器的支持，去这里： https : //webdesign.tutsplus.com/articles/quick-tip-easy-css3-checkboxes-and-radio-buttons–webdesign- 8953

Answer 2

我最近发现的造型单选button和checkbox。 之前，我不得不使用jQuery和其他东西。 但是这很简单。

 input[type=radio] { padding-left:5px; padding-right:5px; border-radius:15px; -webkit-appearance:button; border: double 2px #00F; background-color:#0b0095; color:#FFF; white-space: nowrap; overflow:hidden; width:15px; height:15px; } input[type=radio]:checked { background-color:#000; border-left-color:#06F; border-right-color:#06F; } input[type=radio]:hover { box-shadow:0px 0px 10px #1300ff; } 

你可以做一个checkbox，显然改变input[type=radio] input[type=checkbox]并改变border-radius:15px; 到border-radius:4px; 。

希望这对你有些用处。

Answer 3

课程也很好，例如：

 <style> form input .checkbox { /* your checkbox styling */ } </style> <form> <input class="checkbox" type="checkbox" /> </form> 

Answer 4

 input[type="checkbox"] { /* your style */ } 

但是，这只适用于IE7及以下版本的浏览器，对于那些需要使用类的浏览器。

Answer 5

您只能通过执行以下操作来应用某些属性：

 input[type="checkbox"] {...} 

它在这里解释它。

Answer 6

由于IE6不理解属性select器，因此您可以将仅由IE6（具有条件注释）以及Dean Edwards的jQuery或IE7.js所看到的脚本组合起来。

IE7（.js）是一个JavaScript库，使Microsoft Internet Explorer的行为像一个符合标准的浏览器。 它修复了许多HTML和CSS问题，使IE6和IE6下的透明PNG工作正常。

使用类或jQuery或IE7.js的select取决于您的喜好和不喜欢以及您的其他需求（也许PNG-24在整个网站的透明度，而不必依赖于PNG-8完全透明，在IE6上回退到1位透明度 – 仅由Fireworks和pngnq等创build）

Answer 7

Trident为checkbox和单选button控件提供了::-ms-check伪元素。 例如：

 <input type="checkbox"> <input type="radio"> ::-ms-check { color: red; background: black; padding: 1em; } 

这在Windows 8上的IE10中显示如下：

Answer 8

虽然CSS确实提供了一种方法，让您可以根据checkboxtypes或其他types进行特定的样式，但是不支持此function的浏览器会出现问题。

我认为你在这种情况下唯一的select是将类应用到你的checkbox。

只需将class =“checkbox”添加到您的checkbox。

然后在你的css代码中创build这个样式。

有一件事你可以做的是这样的：

的main.css

 input[type="checkbox"] { /* css code here */ } 

ie.css

 .checkbox{ /* css code here for ie */ } 

然后使用IE特定的CSS包括：

 <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]--> 

您仍然需要添加类才能在IE中工作，并且在不支持IE的其他非IE浏览器中不起作用。 但它会使你的网站向前思考的CSS代码和IE获得支持，你将能够删除即特定的CSS代码，也是checkbox的CSS类。