Ask coding questions

← Back to all posts
css attr() does not work
ErrorbotTHE2nd (7)

when ever i try to use attr() in css, it dose not work!

Html

<div 
      class="dropdown" 
      
      data-buttonBg="#4CAF50"
      data-hoverButtonBg="#3e8e41"
      data-linkBg="#f9f9f9" 
      data-hoverLinkBg="4CAF50"
      >
      <button>Dropdown</button>
      <div class="dropdownContent">
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>
</div>

css:

.dropdown {
  position: relative;
  display: inline-block;

  --bbgc: attr(data-buttonBg);
  --lbgc: attr(data-linkBg);
  --hbbgc: attr(data-hoverButtonBg);
  --hlbgc: attr(data-hoverLinkBg);
  --ddt: attr(data-dropdownTime);

  --buttonBackgroundColor: attr(data-buttonBg color);
  --linkBackgroundColor: #f9f9f9;
  --hoverButtonBackgroundColor: #3e8e41;
  --hoverLinkBackGroundColor:#f1f1f1;
  --dropDownTime: 1s;
}

.dropdown button {
  background-color: var(--buttonBackgroundColor);
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdownContent {
  background-color: var(--linkBackgroundColor);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  clip-path: polygon(0 0, 100% 0, 100% -1%, 0 -1%);
  transition: clip-path var(--dropDownTime);
  z-index: 1;
}

.dropdownContent a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdownContent a:hover {background-color: var(--hoverLinkBackgroundColor)}

.dropdown:hover .dropdownContent {
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 0);
}

.dropdown:hover .dropbtn {
  background-color: var(--hoverButtonBackgroundColor);
}

as you can see:

.dropdown {
  position: relative;
  display: inline-block;

  --bbgc: attr(data-buttonBg);
  --lbgc: attr(data-linkBg);
  --hbbgc: attr(data-hoverButtonBg);
  --hlbgc: attr(data-hoverLinkBg);
  --ddt: attr(data-dropdownTime);

  --buttonBackgroundColor: attr(data-buttonBg color); /*<---- for testing*/
  --linkBackgroundColor: #f9f9f9;
  --hoverButtonBackgroundColor: #3e8e41;
  --hoverLinkBackGroundColor:#f1f1f1;
  --dropDownTime: 1s;
}

seems to not work!

idk what is happened! it seams to work when i do this...

.dropdown {
  position: relative;
  display: inline-block;

  --bbgc: attr(data-buttonBg);
  --lbgc: attr(data-linkBg);
  --hbbgc: attr(data-hoverButtonBg);
  --hlbgc: attr(data-hoverLinkBg);
  --ddt: attr(data-dropdownTime);

  --buttonBackgroundColor: #4CAF50; /* <--- i changed this... */
  --linkBackgroundColor: #f9f9f9;
  --hoverButtonBackgroundColor: #3e8e41;
  --hoverLinkBackGroundColor:#f1f1f1;
  --dropDownTime: 1s;
}

the only thing i changed was attr() to no #4CAF50 in the buttonBackgroundColor var. it seems to be the problem, but in the mdn docs it says that all browser should work (https://developer.mozilla.org/en-US/docs/Web/CSS/attr()#browser_compatibility) but it is experimental so idk.

Comments
hotnewtop
Coder100 (16989)

no spaces

--buttonBackgroundColor: attr(data-buttonBg-color);
ErrorbotTHE2nd (7)

@Coder100 what do you mean??? Also I Dont have --buttonBackgroundColor: attr(data-buttonBg-color); enywhare in my code...