CSS/HTML：如何更改複選框輸入內複選標記的顏色？

Question

如何更改HTML複選框輸入內複選標記的顏色？

Answer 1

你可以創建一個複選框圖像並使用它作爲您的複選框

下面的討論後自定義輸入控件...

http://www.thecssninja.com/css/custom-inputs-using-css

Answer 2

您可以模仿與其他元素並設置一個複選框根據需要設置背景顏色。

http://jsfiddle.net/ApHME/

我還沒有試過，使其完美的，只是爲了說明這個概念。正如你所看到的，背景顏色是綠色的，沒有圖像，沒有涉及的圖書館;最小的js。

---

等待!!!
MVC純粹主義者和其他狂熱分子 - 你可以很容易地將js移動到它自己的小方法中，但我試圖用 來演示簡單 - 漂亮的 請不要爲此投下我票。
感嘆。

Answer 3

下面是一個純粹的CSS解決方案，不應該中斷屏幕閱讀器或默認的用戶代理操作。此外，在最新版本的4大瀏覽器（以及其他一些如果您添加一些額外的黑客，但我會留給你找出;可能不會超過IE8 +的支持，因爲它使用僞元素）。

這個想法是隱藏實際的表單元素（因爲瀏覽器用內部樣式進行硬性替換，並且不會將所有樣式功能暴露給css），並將其替換爲我們喜歡的樣式。一個副作用是，如果你需要的話，你會想跟蹤變化事件而不是點擊JS中的事件（但是你仍然這樣做是對的？）。

因爲標籤是聯繫在一起的表單元素點擊它像人們所期望的，因此新的，真棒，複選框（::before）濫用屬性的原始選擇器（[checked]），以檢查它是否checked。當它被檢查時，它會顯示我們的awesomer複選標記（::after）。

複選標記（::after）會濫用邊框寬度的厚度和高度/寬度以製作複選標記，如項目。最後，我們將方框45deg轉換爲適當的角度。

要更改複選標記的顏色，請更改::after樣式的邊框顏色。此外，如果您希望它始終與您的文字顏色匹配，請完全刪除邊框顏色。要更改收音機，請更改徑向漸變起始顏色（非白色的顏色）。

而且真棒的是，它依賴於字體大小，因此，如果您的文字比較大，應該勻權（雖然可以使用相對字體大小時發生舍入誤差，所以要小心）

我已經包括兩種可檢查類型的基本樣式（複選框和收音機）。

HTML：

<fieldset> 
    <legend>Checkbox example</legend> 
    <input id="checkbox" type="checkbox"/> 
    <label for="checkbox">Some awesome checkbox label</label> 
</fieldset> 
<fieldset> 
    <legend>Radio example</legend> 
    <div> 
     <input id="radio1" type="radio" name="radio"/> 
     <label for="radio1">Some awesome radio option #1</label> 
    <div> 
    </div> 
     <input id="radio2" type="radio" name="radio"/> 
     <label for="radio2">Some awesome radio option #2</label> 
    </div> 
</fieldset> 

CSS：

label, input[type="radio"], input[type="checkbox"] { 
    line-height: 2.1ex; 
} 

input[type="radio"], 
input[type="checkbox"] { 
    position: absolute; 
    left: -999em; 
} 

input[type="radio"] + label, 
input[type="checkbox"] + label { 
    position: relative; 
    overflow: hidden; 
    cursor: pointer; 
} 

input[type="radio"] + label::before, 
input[type="checkbox"] + label::before { 
    content: ""; 
    display: inline-block; 
    vertical-align: -25%; 
    height: 2ex; 
    width: 2ex; 
    background-color: white; 
    border: 1px solid rgb(166, 166, 166); 
    border-radius: 4px; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.25); 
    margin-right: 0.5em; 
} 

input[type="radio"]:checked + label::before { 
    background: radial-gradient(circle at center, #1062a4 .6ex, white .7ex); 
} 

input[type="radio"] + label::before { 
    border-radius: 50%; 
} 

input[type="checkbox"]:checked + label::after { 
    content: ''; 
    position: absolute; 
    width: 1.2ex; 
    height: 0.4ex; 
    background: rgba(0, 0, 0, 0); 
    top: 0.9ex; 
    left: 0.4ex; 
    border: 3px solid #1062a4; 
    border-top: none; 
    border-right: none; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

旁註：necropost因爲這是彈出當我試圖記得我拉這一關的第一個問題以往。 ;）