Question

我的问题是仅在Chrome中发生的行为（不在mozilla中），当我链接 css时会发生这种情况，所以如果我使用样式标记我得到了我的预期。

问题是当我在链接的样式表中使用转换时，元素在加载时会从白色或黑色淡化到定义的颜色。这真的很奇怪，如下所示：

The glitch

我期待的是：

Expected

这是一个简单的代码来演示我的问题：

index.html：

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <aside>
        <form>
            <input type="text" name="pseudo" id="reg-pseudo" class="text-left"/><br/>
            <input type="checkbox" name="rememberme" id="rememberme" class="hidden"/>
            <label for="rememberme" class="checkbox float-left"></label>
        </form>
    </aside>
</body>

style.css：

aside input:focus {
    border-color: #5FAACF;
}
aside input, aside .checkbox {
    border-color: #a18bb9;
    color: #333;
    font-weight: bolder;
    background-color: white;
    border-width: 4px;
    border-style: solid;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.5s ease-in-out;
}
aside .checkbox {
    width: 14px;
    height: 14px;
    margin: 2px 4px;
    display: inline-block;
}
aside input[type=checkbox]:checked + .checkbox {
    border-color: #cf5f9b;
}
aside input[type=checkbox]:checked + .checkbox:before {
    content: "✔";
    top: -4px;
    position: relative;
    display: inline;
}
.hidden {
    visibility: none;
    width: 0;
}

而且here是我想要的工作小提琴（因为我解释说css没有链接但是在样式标签中）

之前没有发生这种情况，所以我想知道是否有办法使用样式标记来解决此问题，并使用延迟来解决问题，如果我在这里做错了或者是＃＆＃ 39;只是一个乘客铬虫？感谢

我发现了一个类似的问题here，但我对答案不满意

Answer 1

您是否尝试使用！important 来覆盖任何浏览器样式或错误？像这样：

aside input, aside .checkbox {
    border-color: #a18bb9 !important;
}

chrome上的链接样式表具有奇怪的过渡行为

1 个答案: