How can I use the HTML data attribute in CSS as a property? [duplicate]


Tags: html,css

Problem :

This question already has an answer here:

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>


Solution :

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.


    CSS Howto..

    How can I force LESS (css) to recognize a variable?

    How to create Rectangle With Gradient Color Stripes Border via CSS?

    How to align 'n' divs horizontally WITH margin/padding?

    How to center text over an image while keeping it below fixed nav bar in css?

    How to have a css element with transitions except initially?

    How can I use AngularJS directive to apply css style for a string?

    How show button hovering above an image or pressing over it? [closed]

    How can I hide slide menu in appcelerator?

    How to write css for specific div selection like before after

    Z-stacking CSS 3 Flex boxes : how to overlay DIVs that are flexbox items?

    How to get my navbar to fluidly contain the largest element?

    How to set borders between children from parent in CSS?

    How can I memorize all CSS shorthands?

    ASP.Net MVC: How to use razor variable in CSS file

    Show or hide button text responsively in jQuery Mobile

    Show outlines around divs in a web-based HTML editor, a la Dreamweaver and other editors

    How do I make a popup contact form exit when clicking the external background div?

    How can I load dynamically typekit fonts?

    How do i add an external CSS file as well as CSS in the HTML file?

    How to add fade in and fade out effect in CSS animations no javascript?

    How to apply the grayscale jquery plugin to a background image?

    how to use css to style a descendant (not a direct child) of an element?

    how to increase the font-size without making it thicker

    How to Remove - Modify btn-inverse Top Border

    How to highlight a currently selected item/section in Wordpress with CSS (maybe PHP too)?

    How to select an element that must have more than one css class?

    How Can i Make a column to fill all the way to the sides in bootstrap

    How can I override CSS inherited properties

    How to add hover effect to img placed in parent container

    How to center this stuff inside a link using CSS?