CSS Variables are not being applied

Question

I am trying to use CSS variables but something weird is going on. I declared the variables like this:

:root {
    --primary: '#fff';
    --black: '#1b1f23';
    --gray: '#586069';
    --orange: '#f9826c';
    --logo: '#fff';
    --header: '#24292e';
    --search: 'rgba(255; 255; 255; 0.13)';
}

Then I used them like this:

input {
    background: var(--search);
}

But for some reason the style is not being applied. When I hover the mouse over the variable in Chrome Devtools it shows me the correct value, but it doesn't apply.

I'm pretty lost on how to make it work.

Edit: I'm using React, so this is the render

user_12984567 · Answer

There are a few problems with your code. The variable values don't need to be a string. And rgba(255; 255; 255; 0.13) should be separated with commas, not semicolons. So that would be rgba(255, 255, 255, 0.13). And the style is being applied; you just can't notice the difference because rgba(255, 255, 255, 0.13) is still white. So the correct CSS for :root would be this:

:root {
  --primary: #fff;
  --black: #1b1f23;
  --gray: #586069;
  --orange: #f9826c;
  --logo: #fff;
  --header: #24292e;
  --search: rgba(255, 255, 255, 1);
}

Example:

:root {
  --primary: #fff;
  --black: #1b1f23;
  --gray: #586069;
  --orange: #f9826c;
  --logo: #fff;
  --header: #24292e;
  --search: rgba(255, 25, 255, 0.5); /* The color is pink so we can actually see it working */
}

input {
  background: var(--search);
}

CSS Variables are not being applied

1 Answers