覆盖Materialize 1.0.0收音机样式

时间:2018-10-16 00:07:48

标签: css materialize

我已经修改并使用Materialize 0.100.2使其看起来适合打印,并试图升级到1.0.0

我遇到的麻烦是将radio的实心黑色填充。有人可以指出我想念的是哪种样式(选择器吗?)?

下面的CSS似乎只能在screen上运行(如果我更改了@media),但是在print上无法正确查看。

>

屏幕上的控件:
Screen - Controls

预计从印刷版(经过测试可在屏幕上使用)
Print - Expected

打印结果:
Print - Result

我覆盖CSS的最后几行是

@media print {
    /*  Radio Disabled Text  */
    [type="radio"]:disabled + span {
        color: #000000 !important;
    }

    /*  Outer Box - Unchecked  */
    [type="checkbox"].filled-in:not(:checked) + span:not(.lever):after {
        border: 2px solid #000000 !important;
    }

    /*  Outer Box - Checked  */
    [type="checkbox"].filled-in:checked + span:not(.lever):after {
        border: 2px solid #000000 !important;
        background-color: #ffffff !important;
    }

        /*  Inner Mark  */
        [type="checkbox"].filled-in:checked + span:not(.lever):before {
            border-right: 2px solid #000000 !important;
            border-bottom: 2px solid #000000 !important;
        }

    /*  Outer Circle - Unchecked  */
    [type="radio"]:not(:checked) + span:before, [type="radio"]:not(:checked) + span:after {
        border: 2px solid #000000 !important;
    }

    /*  Outer Circle - Checked  */
    [type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:before, [type="radio"].with-gap:checked + span:after {
        border: 2px solid #000000 !important;
    }

        /*  Inner Circle - Checked  */
        [type="radio"]:checked + span:after, [type="radio"].with-gap:checked + span:after {
            /*  should fill in the dot  */
            background-color: #000000 !important;
        }
}

0 个答案:

没有答案
相关问题