如何改變被禁用的輸入複選框標籤的CSS？..因爲它太輕，難以看到

夥計，我有一些輸入複選框標籤：他們看起來很輕，很難看到或打印。我試過restyle複選框，似乎禁用複選框的樣式不能更改？你們有什麼想法嗎？非常感謝！ :)如何改變被禁用的輸入複選框標籤的CSS？..因爲它太輕，難以看到

2010-11-29 Lei

請提供一些示例代碼...這顏色正在使用？你是什麼意思**複選框標籤**？你是指` HTML元素？或者你的意思是* tag * – 2010-11-29 23:38:52

其他的意思是禁用的輸入不會被提交，也不能被改變......所以用戶可以清楚地看到它們可能並不是那麼重要。 – Quentin 2010-11-30 00:04:05

訣竅是不實際禁用複選框，但攔截「禁用」文本框的點擊操作，因此它的功能就好像它從該點被禁用，您可以設置它的樣式，它會看起來如何。

你會做什麼是添加此對您「已禁用」複選框，而不是禁用=「禁用」：

onclick="return false;"

編輯：正如有人指出的下方有使用這種方法的缺點。由於在技術上啓用了複選框的值，所以仍然會將其複製回服務器，而如果您使用了受支持的方法，則將失去對外觀的控制，但不必處理這些附加數據。（謝謝羅伯特）

來源

2010-11-29 23:40:19 Adrian

這不完全相同。啓用的控件被髮回服務器，禁用不是。 – 2010-11-29 23:42:32

同意海報需要說明這一點，但它可以讓他控制元素的造型，同時不允許用戶與控件進行交互。也謝謝你們，當我寫回答 – Adrian 2010-11-29 23:44:41

如果您使用默認複選框與默認樣式，你不應該太擔心。他們已經設計出它們應該是可以看到的。
不妨是你的顯示器對比度/亮度設置。

但是如果您使用一些自定義複選框設計，您很可能不得不更改圖像。

來源

2010-11-29 23:41:49

查一查這個問題： How to change checkbox's border style in CSS?

看起來的一樣豈不等於不可能改變複選框的樣式：/

來源

2010-11-29 23:44:45 LightDark

有了一點CSS3的你其實可以做一些關於它很酷的東西。

我想出了這個可能的解決方案http://jsfiddle.net/HCbRF/1/

HTML

<div> 
    <input type="checkbox" id="c1" disabled /> 
    <label for="c1"><span></span>Check Box 1</label> 
    <br> 
    <input type="checkbox" id="c2"/> 
    <label for="c2"><span></span>Check Box 2</label> 
</div>

CSS

div { 
    width:110px; 
    height:50px; 
    padding:20px; 
    background:#40464b; 
    border-radius:6px; 
} 
input[type="checkbox"] { 
    display:none; 
} 
input[type="checkbox"] + label { 
    color:#f2f2f2; 
    font-family:Arial, sans-serif; 
    font-size:14px; 
    line-height: 25px; 
} 
input[type="checkbox"] + label span { 
    display:inline-block; 
    width:19px; 
    height:19px; 
    margin:-1px 4px 0 0; 
    vertical-align:middle; 
    background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) left top no-repeat; 
    cursor:pointer; 
} 
input[disabled] + label span { 
    display:inline-block; 
    width:16px; 
    height:16px; 
    margin:-1px 6px 0 0; 
    vertical-align:middle; 
    background:#ccc left top no-repeat; 
    border-radius: 3px; 
    -moz-box-shadow: inset 0 0 2px #000; 
    -webkit-box-shadow: inset 0 0 2px#000; 
    box-shadow: inner 0 0 5px #888; 
    cursor:pointer; 
} 
input[type="checkbox"]:checked + label span { 
     background:url(http://webdesigntutsplus.s3.amazonaws.com/tuts/391_checkboxes/check_radio_sheet.png) -19px top no-repeat; 
}

我從本教程starte http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/

來源

2013-08-14 14:03:57 jgtoriginal

如何改變被禁用的輸入複選框標籤的CSS？..因爲它太輕，難以看到

回答

相關問題