CSS 將邊框應用於除復選框之外的所有輸入元素

Question

我有一個 css class：

input {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    border: 1px solid #003399;
}

這適用於我想要的大部分內容，但我現在需要一個沒有此邊框的復選框，而頁面上輸入元素的 rest 繼續應用邊框。

因此，我創建了額外的 css class：

input[type="checkbox"] 
{
    border: none;
}

這適用於 FireFox 和 Chrome 但不是 ie 8，當我在 ie 中使用開發人員工具檢查元素時，我可以看到 styles 都已被選中，但只有當我取消選擇輸入樣式旁邊的復選框時，邊框才會出現復選框消失。

這是默認設置：

在此處輸入圖像描述

這就是我為擺脫邊界所做的事情：

在此處輸入圖像描述

Answer 1

為什么不直接使用:not 選擇器來反轉屬性選擇器？

input:not([type=checkbox])
{
    border: 1px solid #039;
}

如果它是 IE8 或更早版本，您可能應該為要設置邊框的類使用單獨的規則，因為它不支持：不（或任何好東西）。

編輯：

input[type=checkbox]
{
    border: none;
}

如果添加 doctype，即使是簡單的 <!doctype html> 也可以在 IE8 中使用

Answer 2

好像說medium none 。 你可以試試border: 0px transparent; 看看這是否有所不同。

Answer 3

在 IE 中，它不是您所看到的邊框。 由於焦點在復選框上，它必須是突出顯示。 嘗試在復選框單擊時執行模糊事件可能會有所幫助。

Answer 4

這有幫助嗎？

input[type="checkbox"] 
{
    border: none !important;
}