How do I properly add a background-color?
Question
I found a free custom Radiobutton which I implemented within my own code. But I'm struggling to make it work and having some issues with the functionality. Whenever I add a background-color to the parent object it doesn't change the buttons color when pressed. I have tried changing Z-index values on the parent object and some other things but nothing seems to work.
body{ width: 100%; overflow-x: hidden; font-size: 17px; line-height: 30px; -webkit-transition: all 300ms linear; transition: all 300ms linear; } [type="radio"]:checked, [type="radio"]:not(:checked){ position: absolute; left: -9999px; width: 0; height: 0; visibility: hidden; } .checkbox-tools:checked + label, .checkbox-tools:not(:checked) + label{ position: relative; display: inline-block; padding: 20px; font-size: 14px; line-height: 20px; letter-spacing: 1px; margin: 0 auto; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; text-align: center; border-radius: 4px; overflow: hidden; cursor: pointer; text-transform: uppercase; color: black; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .checkbox-tools:not(:checked) + label{ background-color: white; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .checkbox-tools:checked + label{ background-color: transparent; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6); } .checkbox-tools:not(:checked) + label:hover{ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6); } .checkbox-tools:checked + label::before, .checkbox-tools:not(:checked) + label::before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 4px; background-image: linear-gradient(298deg, yellow, green); z-index: -1; } /* .bg-color { background-color: grey; z-index: -999; } */
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" /> <title></title> </head> <body> <div class="container bg-color"> <div class="row pt-5"> <div class="col-12"> <input class="checkbox-tools test-tools" type="radio" name="typ-av-el" id="elhandel-button"> <label class="for-checkbox-tools" for="elhandel-button"> <p>button 1</p> </label> <!-- --> <input class="checkbox-tools test-tools" type="radio" name="typ-av-el" id="elnät-button"> <label class="for-checkbox-tools" for="elnät-button"> <p>button 2</p> </label> <div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>
The code snippet I sent works, but when the bg-color class is enabled it stops working. You no longer see the buttons changing into the linear-gradient color. Any solutions for this?
Thanks in advance!
1 answers
solution1
0 2020-08-24 12:41:18
Is this what you looked for? I think the background-image was attached to the wrong CSS scenario, as it should be visible when you clicked it right?
- I edited it with a fix for the Transition. I cant acces the change where it occurs with a normal Transition so i used a real keyframes-animation to get the same effect
body{ width: 100%; overflow-x: hidden; font-size: 17px; line-height: 30px; -webkit-transition: all 300ms linear; transition: all 300ms linear; } [type="radio"]:checked, [type="radio"]:not(:checked){ position: absolute; left: -9999px; width: 0; height: 0; visibility: hidden; } .checkbox-tools:checked + label, .checkbox-tools:not(:checked) + label{ position: relative; display: inline-block; padding: 20px; font-size: 14px; line-height: 20px; letter-spacing: 1px; margin: 0 auto; margin-left: 5px; margin-right: 5px; margin-bottom: 10px; text-align: center; border-radius: 4px; overflow: hidden; cursor: pointer; text-transform: uppercase; color: black; } .checkbox-tools:not(:checked) + label{ background-color: white; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1); } .checkbox-tools:checked + label{ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6); animation: example 300ms forwards; } .checkbox-tools:not(:checked) + label:hover{ box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.6); } .checkbox-tools:checked + label::before, .checkbox-tools:not(:checked) + label::before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; border-radius: 4px; } .bg-color { background-color: grey; z-index: -999; } @keyframes example { from {background-color: white;} to {background-image: linear-gradient(298deg, yellow, green);} }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous" /> <title></title> </head> <body> <div class="container bg-color"> <div class="row pt-5"> <div class="col-12"> <input class="checkbox-tools test-tools" type="radio" name="typ-av-el" id="elhandel-button"> <label class="for-checkbox-tools" for="elhandel-button"> <p>button 1</p> </label> <!-- --> <input class="checkbox-tools test-tools" type="radio" name="typ-av-el" id="elnät-button"> <label class="for-checkbox-tools" for="elnät-button"> <p>button 2</p> </label> <div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I get `HTML > Body > Background-Color > Transparent`?
How do I put the CSS Gradient in the 'background-color'?
How do I change the background-color of an accordion tab in Bootstrap?
How do I make the background-color reoccurring for each table?
How do I implement a background-color into my HTML program?
How to add a full background-color to a div?
How to add background-color in a section part?
How do I make a transparent background-color that is on top of a background-image go to bottom?
How can I make a specific div with transparent background-color over a div with black background-color
How do I change background-color of 2 divs when I press 1 other div?
Related Tags