CSS - Add Color with a data attribute - attr(data-color color)

Question

I'm trying to add color to different element with a data attribute in my css but doensn't work ...

I follow this instructions :

The attr() Function: Properties Values Collected from the Edited Document.

HTML

<table>
    <tr>
        <td>
            <span class="bgborder" data-color="#e7663f"></span>
            <i class="fa fa-copy"></i>
        </td>
        <td>
            <span>Blaablaaablaaa</span>
        </td>
    </tr>
</table>
<table>
    <tr>
        <td>
            <span class="bgborder" data-color="#77c385"></span>
            <i class="fa fa-upload fa-fw"></i>
        </td>
        <td>
            <span>Blablaablaaa</span>
        </td>
    </tr>
</table>

CSS

.bgborder {
    display: block;
    width: 5px;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: attr(data-color color);
}

Nothing appears...Am I right ?

In my chrome inspector I have this :

background-color: attr(data-color color); 
/!\ Invalid property value

I don't understand why... ???

Thanks for your help :)

score 71 · Answer 1 · answered May 27 '18 at 10:25

71

You can pass css values from html:

<button style="
    --tooltip-string: 'Ug. Tooltips.';
    --tooltip-color: #f06d06;
    --tooltip-font-size: 11px;
    --tooltip-top: -10px">
  Button
</button>

to css:

button::after {
  content: var(--tooltip-string);
  color: var(--tooltip-color);
  font-size: var(--tooltip-font-size);
}

source: https://css-tricks.com/css-attr-function-got-nothin-custom-properties/ codepen: https://codepen.io/chriscoyier/pen/EbxVME

answered May 27 '18 at 10:25

Romain Norberg

947
6
6

4

Neat solution, here is browser support for that https://caniuse.com/#search=css%20v – nacholibre May 12 '20 at 09:52
1

This is great. The var is inherited by child elements too which is extra-awesome! – cronoklee Dec 26 '20 at 18:27
You make my day! – Ledadu Jan 31 '22 at 16:36

score 51 · Accepted Answer · answered Dec 17 '14 at 15:47

51

Always a good idea to read the documentation: https://developer.mozilla.org/en/docs/Web/CSS/attr

screenshot of support table

Surprise! If nothing supports it, then it won't work ;)

Alternative: If you know you only have a limited range of colours, try:

[data-color=red] {background-color:red !important}
[data-color=blue] {background-color:blue !important}
[data-color=zophan-blue] {background-color:#33ccff !important}

As you can see, this allows flexibility, such as defining your own colours ;)

answered Dec 17 '14 at 15:47

Niet the Dark Absol

320,036
81
464
592

s***... it's to bad... no other possibility to do that ? with less ? (but without jquery) – Zagloo Dec 17 '14 at 15:51
4

You mean other than `style="background-color:#123456;"`? – Niet the Dark Absol Dec 17 '14 at 15:52
@Zagloo: With Less you can use loops to avoid repetition of code but the compiled CSS would still have to be the same way as mentioned above. – Harry Dec 17 '14 at 15:59
2

3 years later, still no support :p – nodws Jun 07 '17 at 16:06
Same it still doesnt support , sad when we have to theme the sites dynamically! – Dpk_Gopi Oct 23 '17 at 11:56
how about now? :-) – James Cazzetta Dec 09 '21 at 10:38
The time has come to 2022, attr still only supports string format... – LianSheng Oct 19 '22 at 15:26

score 28 · Answer 3 · answered May 23 '17 at 12:14

28

If you are talking only about colors, you can use currentColor value as a proxy.

For example:

HTML

<td>
   <span class="bgborder" style="color: #e7663f"></span>
   <i class="fa fa-copy"></i>
</td>

CSS

.bgborder {
  background-color: currentColor;
}

answered May 23 '17 at 12:14

Treeskar

566
5
6

score 6 · Answer 4 · answered Dec 17 '14 at 15:47

Currently, the CSS attr function can only be used with the content property in browsers

See here for compatibility

Per the CSS2 spec:

Limited to the content property

CSS3 will extend this (proposal)

..can be used on all properties; may return other values than <string>

score 3 · Answer 5 · answered Sep 04 '17 at 20:43

3

I guess that you are looking is CSS variables and you can use at Chrome, Firefox and Safari. Check the browser support at Can I use

And can see more at the video from Lea Verou

answered Sep 04 '17 at 20:43

Alessander França

2,697
2
29
52

score 2 · Answer 6 · answered Feb 20 '20 at 22:23

alternately a very handy bit of javascript:

<P _my_colour="red" >one</P>
<P _my_colour="blue">two</P>
<P _my_colour="green">three</P>
<script>
    var my_col = document.querySelectorAll("[_my_colour]");
      my_col.forEach(element => {
        element.style.color = element.getAttribute("_my_colour");
    })

</script>

The css solutions outlined by other contributors are generally better and simpler, so a JS solution is somewhat reinventing the wheel, but does do explicitly what you want in the question, so it's here for completeness.

score 0 · Answer 7 · answered Nov 24 '22 at 09:35

Somehow, it's always possible!. Example: Let's define a global variable in css:

:root {
  --theglobalvariable: coral;
}

In Javascript: Let's modify that global variable from javascript, assigning as value, the content of an element's attribute

var root = document.querySelector(':root');
root.style.setProperty('--theglobalvariable', document.getElementById('IdElement').getAttribute('NameOfAttribute'));

Now, in Css let's insert the value of the global variable into the element we want, and enjoy!

.someElement{
    color:var(--theglobalvariable);
}

CSS - Add Color with a data attribute - attr(data-color color)

7 Answers7

Linked