DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Languages
  4. Issue With CSS Variables and Button Background Styling

Issue With CSS Variables and Button Background Styling

Ever run into an issue with a after you set the background color? Read on for a solution to such a situation that this author uncovered.

Paul Kinlan user avatar by
Paul Kinlan
·
Apr. 15, 17 · Tutorial
Like (0)
Save
Tweet
Share
3.72K Views

Join the DZone community and get the full member experience.

Join For Free

I’ve been creating a <share-button> custom element and after I launched it, I noticed that something was funky with the default button styling. They were white instead of gray.

I needed to be able to dynamically let the developer style the button that was in my Shadow DOM, and to do that you have to use CSS Variables. In Chrome (at least… I need to test other browsers) there seems to be no way to have a button with a background-color whose value is defined by a CSS Variable, even if the value of the CSS variable is ‘initial’, ‘inherit’, or something undefined, and have it appear as the default button.

The instant you do anything with the background color it changes the <button> to be non-natively styled.

For example:

<style>
    #button2 {
        --but2: initial;
        background-color: var(--but2);
    }
</style>
<button>Button 1</button>
<button id="button2">Button 2</button>


Demo:

Here is an  image of it not working for me:

There is a way around this. My colleague Surma suggested that I should try and get the default computed styles, add that to the custom CSS variable, and then apply that to the background-color.

It works, but it is hacky.

<style>
    #button3 {
        --but3: initial;
    }
</style>
<button>Button 1</button>
<button id="button3">Button 3</button>
<script>
    const defaultButtonStyle = window.getComputedStyle(button3);
    button3.style.setProperty('--but3', defaultButtonStyle.backgroundColor);
    button3.style.backgroundColor = 'var(--but3)';
</script>


Here is an image of it working for me:


CSS

Published at DZone with permission of Paul Kinlan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • NEXT.JS 13: Be Dynamic Without Limits
  • Handling Automatic ID Generation in PostgreSQL With Node.js and Sequelize
  • How to Perform Accessibility Testing of Websites and Web Apps
  • Build CRUD RESTful API Using Spring Boot 3, Spring Data JPA, Hibernate, and MySQL Database

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: