更改html複選框的背景顏色

如果更改HTML複選框的背景顏色，是否有可能以及如何更改背景顏色？我特別談論小檢查符號背後的白色方塊。更改html複選框的背景顏色

我已經在這方面進行了很多搜索，但還沒有找到確鑿的答案。

2011-05-02 risingTide

只有使用腳本就可以實現跨瀏覽器解決方案，see an example here of a styled checkbox...。

它使用jQuery UI轉變作風

2011-05-02 15:10:51 BrunoLM

這個例子正是我一直在尋找的。我沒有問題使用腳本來實現解決方案。這是一個後續問題。 ** jQuery是否本身執行此操作，還是應該使用特定的插件？**（我嘗試搜索插件但找不到一個;但是，它們的搜索效果並不好） – risingTide 2011-05-02 15:25:00

它是一個jQuery UI小部件。我真的不知道如何使用它，一名同事向我展示了一次。這裏有一個教程使用它http://www.tuttoaster.com/enhance-forms-using-jquery-ui/ – BrunoLM 2011-05-02 15:34:50

是的，我看到你確實包括一個插件的鏈接。乍一看，我認爲這只是jQuery鏈接。感謝您的幫助，併爲您的最新鏈接！ – risingTide 2011-05-02 15:38:46

我懷疑這是可能的，因爲複選框外觀是特定於操作系統的無論如何（我的複選框有一個陰影灰色背景，而不是一個白色的）。

解決方案可能是使用JavaScript和某些圖形來構建自己的複選框。

來源

2011-05-02 15:07:31

僅限AFAIK Opera支持表單元素的「背景」CSS語句。

欲瞭解更多信息，檢查了這一點：http://www.456bereastreet.com/lab/styling-form-controls-revisited/checkbox/

來源

2011-05-02 15:08:14 abaumg

我以前看這個網站，但這些信息似乎有點過時了。這裏測試的最新瀏覽器是Windows XP中的IE7。 – risingTide 2011-05-02 15:21:45

傑夫乙表明another way上色的複選框。他還提供了一個jsfiddle的例子。

這個想法是包裝跨度，並使用一些JavaScript和CSS的PNG圖像。

來源

2013-07-17 07:28:03

我正在實現顏色複選框我認爲它會很容易做顏色複選框，但是當我開始實施它。 Job是第一次這麼做。下面是COLOR CHECK BOX的HTML和CSS，任何人都可以定製這個HTML和CSS。

HTML： -

<div class="squaredThree left"> 
    <input type="checkbox" value="None" id="squaredThree" name="check" /> 
    <label for="squaredThree"></label> 
</div>

CSS： -

.squaredThree { 
    width: 20px;  
    position: relative; 
} 

.squaredThree label { 
    cursor: pointer; 
    position: absolute; 
    width: 15px; 
    height: 15px; 
    top: 0; 
    background:#f7f7f7; 
    border:1px solid #6d7279; 
} 

.squaredThree label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    content: ''; 
    position: absolute; 
    width: 9px; 
    height: 5px; 
    background: transparent; 
    top: 2px; 
    left: 2px; 
    border: 3px solid #0b9dda; 
    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); 
} 

.squaredThree label:hover::after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
    filter: alpha(opacity=30); 
    opacity: 0.3; 
} 

.squaredThree input[type=checkbox]:checked + label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
}

來源

2013-10-31 10:48:37 Novelink

更改html複選框的背景顏色

回答

相關問題