флажки стилей работают на Chrome, но не работают на Firefox

Question

флажки стилей работают на Chrome, но не работают на Firefox

0

Я устанавливаю флажки исключительно в CSS. Тем не менее, мои стили прекрасно работают в хроме, но они не работают в firefox. Вот мой код

Как я могу сделать эту работу в обоих браузерах?

input[type="checkbox"] {
    height:22px;
    width: 22px;
}
input[type="checkbox"]:before{
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #808080;
    content: "";
    background: #FFF;
    border-radius: 10px;
}
input[type="checkbox"]:after{
    position: relative;
    display: block;
    left: 2px;
    top: -20px;
    width: 16px;
    height: 16px;
    border-width: 1px;
    border-style: solid;
    border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
    content: "";
    background-image: linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);
    background-repeat: no-repeat;
    background-position:center;
    border-radius: 10px;
}
input[type="checkbox"]:checked:after{
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%,#FFF 100%);
}
input[type="checkbox"]:disabled:after{
    /*-webkit-filter: opacity(0.4);*/
    opacity: 0.4;
}
input[type="checkbox"]:not(:disabled):checked:hover:after{
    background-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);
}
input[type="checkbox"]:not(:disabled):hover:after{
    background-image: linear-gradient(135deg, #8BB0C2 0%,#FFF 100%);  
    border-color: #85A9BB #92C2DA #92C2DA #85A9BB;  
}
input[type="checkbox"]:not(:disabled):hover:before{
    border-color: #3D7591;
}

2619 16 фев. 2014, в 16:12

Источник

0

это не работает
2619 16 фев. 2014, в 15:45
1

элементы input имеют пустую модель содержимого, поэтому использование сгенерированного содержимого с :before / :after не должно работать с ними.
CBroe 16 фев. 2014, в 15:47
0

@CBroe Любое решение?
2619 16 фев. 2014, в 16:14
0

Уже существует много решений для «пользовательских флажков»… просто перейдите к адаптации.
CBroe 16 фев. 2014, в 16:18
0

@CBroe Я уже гуглил, но не смог найти тот, который особенно используется с input [type = "checkbox"]. Я не хочу использовать классы, идентификаторы и т. Д. Поэтому, когда разработчик использует ввод флажка на веб-сайте, без классов и идентификаторов CSS, он должен получить эти стили по умолчанию.
2619 16 фев. 2014, в 16:27

Показать ещё 3 комментария

Теги:

html

css

html5

css3

1 ответ

Ещё вопросы

элементы input имеют пустую модель содержимого, поэтому использование сгенерированного содержимого с :before / :after не должно работать с ними.
Уже существует много решений для «пользовательских флажков»… просто перейдите к адаптации.
@CBroe Я уже гуглил, но не смог найти тот, который особенно используется с input [type = "checkbox"]. Я не хочу использовать классы, идентификаторы и т. Д. Поэтому, когда разработчик использует ввод флажка на веб-сайте, без классов и идентификаторов CSS, он должен получить эти стили по умолчанию.

Cybus · Answer 1 · 2014-02-18T13-49-00.000Z

Я искал в Интернете объяснения или исправил вашу проблему, и из того, что я обнаружил, эта проблема нелегко устранить. Эта проблема - старая ошибка с firefox, которая еще не исправлена.

К сожалению, нет единого способа решить вашу проблему. Однако я нашел работу, которая, я уверен, вы можете манипулировать в соответствии с вашими потребностями.

Лучшая работа включает в себя переключение нескольких тегов для div и скрытие различных состояний кнопок. Вы можете просмотреть его здесь http://jsfiddle.net/kSxBK/1, не забудьте также ознакомиться с этим, а также http://jsfiddle.net/V98W8/.

 <div id="milestone-table">
        <p>Checkbox</p>
        <label>
            <input type="checkbox"/>
            <label class="checkbox"/>
        </label>
    </div>

Я не уверен, что это именно то, что вы ищете, но я надеюсь, что ваши проблемы исчезнут.

Всего наилучшего,

Генри