0

Say, I have an input box which has a border color which is the browser's default value or a value set by user. Now there is another element where I want to use the same property value as that of the input element. Is this possible to define in CSS? The idea is that their border colors should remain in sync with each other. It can be assumed that the elements are siblings.

charlie
  • 389
  • 3
  • 16
user2599052
  • 1,056
  • 3
  • 12
  • 27
  • class are useful for this – G-Cyrillus Sep 29 '19 at 12:37
  • 1
    ok but any other way since I am more interested in using browser default for that element. in this case input element. – user2599052 Sep 29 '19 at 12:39
  • 1
    Actually I think this is an interesting question for the more general case: *Can a CSS rule use the value of another elements' styling?* For example copy the `:before` content of another element to the element being styled. – U. Windl Jan 12 '23 at 11:21

3 Answers3

2

You could achieve this using CSS custom properties (variables) set on a shared parent element.

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

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

input {
  border: 1px solid var(--main-color);
}
<label>my input</label>
<input type="text" />
ksav
  • 20,015
  • 6
  • 46
  • 66
0

No, there is no such method to sync properties between two elements in css. However, you can use classes in css for this purpose. Or otherwise javascript might help.

0

In a comment you mention that you want the browser default, if you don't declare any additional styling on your input elements they will receive the browser input.

Otherwise, if you're chasing a specific styling of input that you've seen you can inspect the element in your browser then create your own custom class based off the values that you find upon inspection and use this class on your own input elements.

Rustang
  • 546
  • 5
  • 15
  • but I want the input element and ul element to have the same prop values but browser could have different defaults defined for them – user2599052 Sep 29 '19 at 12:45
  • 2
    Unfortunately I don't believe you can refer to the default values an element should receive in your CSS and therefore cannot impose those browser defaults of one element onto another element. However if you take the class approach and base the class off one of those elements defaults that you find in the browser, you can achieve the same effect. @user2599052 – Rustang Sep 29 '19 at 12:49