Флажок смотри в опере

Question

У меня есть страница с темным фоном. В IE, Firefox, Chrome и Safari мои флажки выглядят так:

Но Opera отображает флажки так:

Таким образом, пользователь не может видеть, поставил ли он галочку, потому что галочка (галочка) также черная.

Вот часть моего css:

body {
    background-attachment: fixed;
    background-color: #07080A;
    background-image: url('images/bg.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    border: 0 none;
    color: #FFFFFF;
    display: block;
    font-family: Arial;
    font-size: 13px;
    margin: auto auto;
    width: 1000px;
}

input, textarea {
    width: 300px;
    color: #fff;
    background-color: #323232;
    border: none;
    font-size: 13px;
    font-family: Arial;
    padding: 8px 0px 8px 10px;
}

input[type="checkbox"]{
    background: transparent;
    width: 30px;
}

Как я могу это изменить? Мне бы хотелось, чтобы в Opera и других браузерах видимость флажка была такой же.

Answer 1

Попробуйте переопределить свой первый стиль, используя:

input[type="checkbox"] {
    background: inherit;
    width: 30px;
}

Это даст флажку фон его родителя. В зависимости от порядка ваших правил и других правил вам может понадобиться использовать inherit !important.

Answer 2

В Opera свойство background применяется к фону внутри флажка, а не к фону вне флажка. Я полагаю, что вы пытаетесь исправить некоторые проблемы, которые вы можете найти на этой странице о том, как оформлены флажки .

Answer 3

Во-первых, у вас есть опечатка в строке ввода [type = "checkbox"].

Во-вторых, согласно this вы можете явно установить фон флажка белым.Это работает в Опере.

Answer 4

input[type="checkbox"]{
    backgorund: #fff;
    width: 30px;
}

Вам это не подходит?