如何从另一个元素引用CSS属性值

Question

说，我有一个输入框，它的边框颜色是浏览器的默认值或用户设置的值。现在有另一个元素，我想使用与输入元素相同的属性值。是否可以在CSS中定义？这个想法是它们的边框颜色应该保持彼此同步。可以假定这些元素是同级元素。

Answer 1

您可以在共享的父元素上实现此alien_repository设置。

:root {
  --main-color: blue;
}

label {
  color: var(--main-color);
}

input {
  border: 1px solid var(--main-color);
}

<label>my input</label>
<input type="text" />

Answer 2

否，没有这样的方法可以在CSS中的两个元素之间同步属性。但是，您可以为此使用CSS中的类。否则，JavaScript可能会有所帮助。

Answer 3

在评论中，您提到您希望浏览器为默认设置，如果您不对输入元素声明任何其他样式，则它们将接收浏览器输入。

否则，如果您要跟踪看到的特定输入样式，则可以检查浏览器中的元素，然后根据检查时发现的值创建自己的自定义类，并自行使用该类输入元素。