CSS Inherit for unknown Background Color is Actually Transparent
Posting this as suggested by @mavrosxristoforos, kudos! This is less of an answer and more to add on to the information that is available here. Hopefully, this useful to some people out there.
If you only need a non-transparent background that won't clash with the text color, but is still very visible: my solution involves using a combination of currentColor and filters such as invert, contrast or brightness on the parent and child elements.
This tricks works well with dynamic theming such as light, dark or even colored themes without explicitly specifying any color values for these elements. This can be used with some existing CSS themes that don't have things defined with CSS variables or have missing classes to change only a particular color conditionally. Observe the demo below.
var root = document.documentElement;
var themeDark = true;
updateTheme( themeDark );
$('.card').on('click', function(){
themeDark = !themeDark; // switch the theme
updateTheme(themeDark);
});
function updateTheme(useDarkTheme){
if (useDarkTheme) {
root.style.setProperty('--primary','#000');
root.style.setProperty('--secondary','#333');
root.style.setProperty('--ternary','#eee');
} else {
root.style.setProperty('--primary','#efefef');
root.style.setProperty('--secondary','#ddd');
root.style.setProperty('--ternary','#333');
}
}/* say you're using a bootstrap theme with some defined colors,
* but you want to customize some colors of some elements which
* have colors defined without CSS variables that you could
* have used.
*/
body {
font-family: sans-serif; font-size: 14px;
color: var(--primary);
background: var(--secondary);
}
.card {
border: 1px solid #666; border-radius: 6px;
padding: 1em; margin: 1em;
user-select: none; cursor: pointer;
background: var(--ternary);
}
.card h2 {
font-size: 24px;
color: var(--primary);
}
.card-body {
border-radius: 6px;
background: currentColor;
}
.card-body p { padding: 1em; }
.card-body, .card-body p { filter: invert(1) contrast(1.2) brightness(0.8); }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="card">
<h2>Title</h2>
<div class="card-body">
<p><b>Click to toggle the theme.</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>Setting background-color: inherit does cause it to take the background colour of the parent element.
The reason it is taking transparent is because the background colour of the parent (the li) is transparent (the default value).
The only other element in your second JSFiddle which has a background colour set is #unknown_background, which is the anchor's great-great-grandparent.
Add div, ul, li { background-color: inherit; } to the end of your stylesheet and the background will be inherited all the way down and the border will not show up.