將邊框應用於Chrome中的複選框

我的網站上有很多表單，當然，它們中的許多字段都是必需的。如果必填字段爲空，則會爲其指定一個「錯誤」類，並且我試圖將該字段以紅色圈起來，而不管它是文本字段，下拉菜單還是複選框。我有下面的代碼在我的CSS文件：將邊框應用於Chrome中的複選框

.error input, .error select, .error textarea { 
    border-style: solid; 
    border-color: #c00; 
    border-width: 2px; 
}

現在奇怪的是，在IE瀏覽器工作良好，但在Chrome中的複選框未在紅色圓圈，雖然我看得出來檢查當CSS被應用到他們元件。

，這可能是在上面的CSS代碼無關的活躍，但我有別的事情在我的CSS文件：

input[type=checkbox] { 
    background:transparent; 
    border:0; 
    margin-top: 2px; 
}

和用於使複選框在IE8和更少的正確顯示。

任何想法如何我可以在Chrome中可視化紅色邊框？

編輯：這裏有一個的jsfiddle： http://jsfiddle.net/PCD6f/3/

來源

2013-07-17 mmvsbg

請包括的jsfiddle – acudars

PLZ包括的jsfiddle –

這就是： http://jsfiddle.net/PCD6f/3/ – mmvsbg

只要做到這一點，像這樣（你的選擇是錯誤的：.error輸入，.error選擇，.error textarea的）：

input[type=checkbox] { 
    outline: 2px solid #F00; 
}

這裏的jsFiddle

特別針對ch eckbox使用outline: 2px solid #F00;，但請記住，邊框仍然可見。對輸入字段進行樣式設置以在多個瀏覽器中良好地查看它們是棘手和不可靠的。

對於完全自定義樣式的複選框，請從此Gist中查看此jsFiddle。

編輯玩搭配：outline-offset: 10px;

來源

2013-07-17 10:40:14 acudars

您好，謝謝！原來我是這樣做的，但是，輸入是在包含類'錯誤'的div內。如果我這樣做，複選框用紅線圈出圓圈，但旁邊的標籤具有相同的邊框，這也是醜陋的，這就是爲什麼我試圖將它應用到輸入。 http://jsfiddle.net/PCD6f/3/ – mmvsbg

下面是更類似於它的東西：http://jsfiddle.net/PCD6f/5/我試圖只勾選複選框，沒有標籤，然後輸入文本框在它下面。 – mmvsbg

這個怎麼樣：http://jsfiddle.net/achudars/PCD6f/6/ – acudars

複選框，單選按鈕CSS樣式邊框沒有任何圖像或內容。只是純粹的CSS。

的jsfiddle鏈接here

input[type="radio"]:checked:before { 
display: block; 
height: 0.4em; 
width: 0.4em; 
position: relative; 
left: 0.4em; 
top: 0.4em; 
background: #fff; 
border-radius: 100%; 
content: ''; 
} 

/* checkbox checked */ 
input[type="checkbox"]:checked:before { 
content: ''; 
display: block; 
width: 4px; 
height: 8px; 
border: solid #fff; 
border-width: 0 2px 2px 0; 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 
margin-left: 4px; 
margin-top: 1px; 
}

來源

2016-06-29 09:04:15

我找到的最佳解決方案。謝謝。 – mykhailovskyi

Works的me.only輪廓不起作用。

input[type=checkbox].has-error{ outline: 1px solid red !important; }

來源

2016-10-20 09:54:47

我試過了，它沒有顯示紅色邊框。 – abksrv

將邊框應用於Chrome中的複選框

回答

相關問題