时间戳

首页 > 解决方案 > 浏览器忽略扩展中的样式表

html - 浏览器忽略扩展中的样式表

问题描述

我有一个 chrome 扩展。我需要<input>在<div id="panel">使用 css 时设置一些样式。在我的扩展中，我应用了以下样式：

#panel input[type="text"] {
    border: 1px solid var(--gray-color) !important;
}

但是这种变化在 chrome 中被忽略了，并且在检查器中只有没有边框样式的空选择器。

#panel input[type="text"] {                                                injected stylesheet
}

我无法将此边框样式添加到元素。

标签： htmlcssinputgoogle-chrome-extension

解决方案

您的 CSS 或标记中还有其他问题。这里有一些“错误”的例子，但可能不是你的“错误”

:root {
  --gray-color: #cccccc;
  --cool-color: #22ccCC;
  --my-cool-color: var(--cool-coler, #ff0000);
}

#panel input {
  margin-top: 1rem;
}
/* works */
#panel input[type="text"] {
  border: 1px solid var(--gray-color);
}

/* use second due to spelling error */
#panel input[type="text"].tester {
  border: 4px solid var(--grey-color, #0000ff);
}

/* uses the first no spelling error */
#panel input.styler {
  border: 3px solid var(--gray-color, #ffddff);
}

/* uses the second in def spelling error in def */
#panel input.cooler {
  border: 2px solid var(--my-cool-color, #ffddff);
}
<div id="panel">
  Border this: <input type="text" />
  <br /> Border this: <input class="tester" type="text" />
  <br /> Not this: <input class='styler' />
  <br />cooler This: <input class='cooler' />
</div>

推荐阅读