5

How can I use attr() to select the data attribute and set various CSS properties based off the value? For example I have this jsfiddle http://jsfiddle.net/rh1vfmso/ - I set the width via data-width then try to set it via width: attr(data-width);

It works when I set the content as the attribute but nothing else. How would I be able to set the width based off what's set in the attribute in HTML?

<style type='text/css'>
input[type='checkbox']:checked ~ .size:before {
  content: attr(data-width);
  display: block;
  height: 30px;
  background-color: red;
  width: attr(data-width);
  /*width: 100px;*/
}
</style>

<div>    
  <input type='checkbox' id='resize'>
  <label for='resize'>Resize</label>
  <div class="size" data-width=100px></div>
</div>
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
zoite
  • 189
  • 4
  • 13

1 Answers1

3

Support would depend on the given browser's implementation. If it's not working, then it's not currently supported.

According to MDN, support for properties other than content is experimental:

The attr() function can be used with any CSS property, but support for properties other than content is experimental.

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304