CSS Применить границу ко всем входным элементам, кроме флажка

У меня есть класс css:

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

Что работает для большей части того, что я хочу, но теперь мне нужно иметь флажок, который не имеет этой границы, в то время как остальные элементы ввода на странице продолжают применять границу.

Поэтому я создал дополнительный класс css:

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

Это прекрасно работает с FireFox и Chrome, но не с 8, когда я использую инструменты для разработчиков, то есть для проверки элемента, который я вижу, оба стиля были подобраны, но это только тогда, когда я снимаю флажок напротив стиля ввода граница исчезает для флажков.

Это значение по умолчанию:

enter image description here

И вот что я делаю, чтобы избавиться от границы:

enter image description here

Ответы

Ответ 1

Почему бы просто не использовать селектор: not, чтобы инвертировать селектор атрибутов?

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

Если это IE8 или раньше, вы, вероятно, должны использовать отдельные правила для классов, где вы хотите установить границу, поскольку она не поддерживает: not (или любой из хороших вещей).

Edit:

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

работает в IE8, если вы добавляете doctype, даже простой <! doctype html >

Ответ 2

Кажется, что medium none. Вы можете попробовать border: 0px transparent; посмотреть, не изменилось ли это.

Ответ 3

В IE это не граница, которую вы видите. Это должно быть выделение из-за фокуса на флажке. Попробуйте выполнить размытие события на флажке, это может помочь.

Ответ 4

Помогает ли это?

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