複選框的定製

我用下面的代碼用於獲取關於一個複選框複選框的定製

input[type=checkbox]{ 
    -webkit-appearance: none; 
    background-color: #fafafa; 
    border: 1px solid #cacece; 
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); 
     -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); 
      box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); 
    -webkit-border-radius: 4px; 
    -khtml-border-radius: 4px; 
     -moz-border-radius: 4px; 
      border-radius: 4px 
    display: inline-block; 
    position: relative; 
    height: 15px; 
    width: 15px; 
    padding-right: 16px; 
    padding-bottom: 13px; 
}

但它不是在Mozilla工作圓角。你能給我補充一些代碼嗎？

來源

2012-11-27 jerin john

有在你的代碼中的錯誤之前，您應該'顯示有一個分號：直列block'（注意，這並不能解決問題） – Sean

你可以嘗試jQuery UI的爲了這。所以很容易使用:) http://jqueryui.com/button/#checkbox –

或者，如果您使用的是jQuery，那麼有一個不錯的插件http://line25.com/articles/jquery-plugins-for-styling-checkbox-單選按鈕 – Alex

複選框（單選按鈕和SELECT）與操作系統相關，並且由操作系統生成而不是瀏覽器。風格這些元素的能力一直非常有限。

來源

2012-11-27 15:54:45

這個職位是舊的，但，這是我的建議：

副標籤將複選框這樣的：

<input type="checkbox" value="1" id="c1" /> 
<label class="check" for="c1"></label>

隱藏通過CSS的複選框：

.checkboxes input[type=checkbox]{ 
    display:none 
}

風格標籤如你所願。我創建了一個簡單的jsfiddle，它充分演示瞭如何使用personnalise複選框。我將它們放在我的示例中，但可以在CSS中輕鬆添加邊框半徑。

Here是的jsfiddle

來源

2013-09-24 20:47:33 morgul

複選框的定製

回答

相關問題