2012-08-27 116 views
-1

如何設置複選框和無線電輸入的樣式,以便在所有瀏覽器(IE8,firefox,webkit等)上保持統一。我嘗試了各種方法,但直到現在都沒有。 我只想樣式複選框和收音機沒有標籤或跨度如何在其他網絡示例中看到。 這裏有一點幫助將會非常棒。 這裏是一個小提琴的例子: http://jsfiddle.net/FKRaX/11/IE8複選框和收音機

謝謝。

+0

你的榜樣技巧顯示了微軟在IE瀏覽器已經下降和非標準,使他們不以任何其他瀏覽器中運行的過濾器。 – Rob

回答

1

您需要3D黨JS庫,喜歡這裏列出的:http://line25.com/articles/jquery-plugins-for-styling-checkbox-radio-buttons

純CSS解決方案將在WebKit瀏覽器只工作,並且可能在工作最新的Firefox。但對於IE8,你一定需要使用一些JS/jQuery插件來實現這一點。

+0

你認爲jQuery設置了什麼? CSS。 – Rob

+0

是的,我知道,這不是一個問題......但我不想使用標籤進行背景更改或涉及標籤的其他解決方案,我只想設計複選框和無線電。 – RulerNature

0

你試過:

file.css:

.checkbox { 
margin:15px; 
/*opacity:0; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
filter: alpha(opacity=0);*/ 
} 

file.html

<input id="pushon" type="checkbox" checked="checked" class="checkbox" /> 
<input id="pushon" type="checkbox" disabled="disabled" class="checkbox" /> 
<input id="pushon" type="checkbox" checked="checked" disabled="disabled" class="checkbox" /> 
<input id="roundon" type="radio" value="Valoare" checked="checked"/> 
<input id="roundon" type="radio" value="Valoare" disabled="disabled"/> 
<input id="roundon" type="radio" checked="checked" disabled="disabled" /> 
+0

???我不明白... – RulerNature

0

對於年齡較大的IE 8,7,等你需要得到創造性:

例如

input[type="checkbox"], 
#checkboxFieldsID, 
.checkboxFieldsClass { 
display:inline-block; 
-ms-transform: scale(3); /* IE */ 
-moz-transform: scale(3); /* FF */ 
-webkit-transform: scale(3); /* Safari and Chrome */ 
-o-transform: scale(3); /* Opera */ 
padding: 10px; 

/*對老年人的IE */

background:#40668C; /* trick for older IEs */ 
width:50px; /* trick for older IEs */ 
height:50px; /* trick for older IEs */**** 
} 
相關問題