Let we have the following html markup:
<div id="parent" class="parent">
<div id="child" class="child">
</div>
</div>
and corresponding css styles:
.parent{
border-style: solid;
border-color: green;
border-bottom: solid 10px;
background:grey;
width: 300px;
height: 300px;
padding: 10px;
}
.child{
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
.parent {
border-style: solid;
border-color: green;
border-bottom: solid 10px;
background: grey;
width: 300px;
height: 300px;
padding: 10px;
}
.child {
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
<div id="parent" class="parent">
<div id="child" class="child">
</div>
</div>
We can see that child's border color is black, but i dont define this color explicitly.
How I can change this default color to green?
You can't change the default. The default is whatever the browser defines it as.
If you want to inherit the value from the parent (as your mentioning the parent in the question implies), then you must explicitly inherit it.
.child {
border-color: inherit;
}
You must also not use the shorthand border property with the color value omited, since that will reset the property to the default.
.child {
border-color: inherit;
border-width: 20px;
border-style: solid;
}
You can also simply be explicit:
.child {
border-color: green;
border-width: 20px;
border-style: solid;
}
Most of the currently accepted answer is inaccurate:
You can change the default border color: not by CSS, but in the user's graphic environment (system settings, usually available as desktop settings in OS).
You can omit the color value in border shorthand property. In CSS3 the border-color is then set to currentColor, which can also be specified explicitly.
border: 1px solid currentColor; /* CSS3 */
The currentColor is usually black by default system settings. In CSS2, you can also use other system values, see in the link above. These are deprecated, but still working in my Opera.
border: 1px solid ThreeDDarkShadow; /* CSS2 deprecated */
Now the color is gray in my environment. The CSS2 values are (quoting the link above):
ActiveBorder, ActiveCaption, AppWorkspace, Background, ButtonFace,
ButtonHighlight, ButtonShadow, ButtonText, CaptionText, GrayText,
Highlight, HighlightText, InactiveBorder, InactiveCaption,
InactiveCaptionText, InfoBackground, InfoText, Menu, MenuText,
Scrollbar, ThreeDDarkShadow, ThreeDFace, ThreeDHighlight,
ThreeDLightShadow, ThreeDShadow, Window, WindowFrame, WindowText.
Note: currentColor is different from inherit (which will solve your problem as Quentin suggests) and there is no value keyword like default, auto or initial in border-color property. One might think that if you specify invalid or browser-unsupported color, the browser has to pick some color and if there is no way to infer that color, it logically picks the system color anyway since browsers don't stop output on syntax error. However, some browsers implement a mystical numerologic algorithm to infer colors from unknown strings. It doesn't apply in my Opera.
Check your system colors in the snippet
div { float: left; margin: 5px; width: 125px; padding: 20px; border: 1px solid black; color: #800; text-shadow: 0 1px black;}
.ActiveBorder { background-color: ActiveBorder; }
.ActiveCaption { background-color: ActiveCaption; }
.AppWorkspace { background-color: AppWorkspace; }
.Background { background-color: Background; }
.ButtonFace { background-color: ButtonFace; }
.ButtonHighlight { background-color: ButtonHighlight; }
.ButtonShadow { background-color: ButtonShadow; }
.ButtonText { background-color: ButtonText; }
.CaptionText { background-color: CaptionText; }
.GrayText { background-color: GrayText; }
.Highlight { background-color: Highlight; }
.HighlightText { background-color: HighlightText; }
.InactiveBorder { background-color: InactiveBorder; }
.InactiveCaption { background-color: InactiveCaption; }
.InactiveCaptionText { background-color: InactiveCaptionText; }
.InfoBackground { background-color: InfoBackground; }
.InfoText { background-color: InfoText; }
.Menu { background-color: Menu; }
.MenuText { background-color: MenuText; }
.Scrollbar { background-color: Scrollbar; }
.ThreeDDarkShadow { background-color: ThreeDDarkShadow; }
.ThreeDFace { background-color: ThreeDFace; }
.ThreeDHighlight { background-color: ThreeDHighlight; }
.ThreeDLightShadow { background-color: ThreeDLightShadow; }
.ThreeDShadow { background-color: ThreeDShadow; }
.Window { background-color: Window; }
.WindowFrame { background-color: WindowFrame; }
.WindowText { background-color: WindowText; }
<div class="ActiveBorder">ActiveBorder</div>
<div class="ActiveCaption">ActiveCaption</div>
<div class="AppWorkspace">AppWorkspace</div>
<div class="Background">Background</div>
<div class="ButtonFace">ButtonFace</div>
<div class="ButtonHighlight">ButtonHighlight</div>
<div class="ButtonShadow">ButtonShadow</div>
<div class="ButtonText">ButtonText</div>
<div class="CaptionText">CaptionText</div>
<div class="GrayText">GrayText</div>
<div class="Highlight">Highlight</div>
<div class="HighlightText">HighlightText</div>
<div class="InactiveBorder">InactiveBorder</div>
<div class="InactiveCaption">InactiveCaption</div>
<div class="InactiveCaptionText">InactiveCaptionText</div>
<div class="InfoBackground">InfoBackground</div>
<div class="InfoText">InfoText</div>
<div class="Menu">Menu</div>
<div class="MenuText">MenuText</div>
<div class="Scrollbar">Scrollbar</div>
<div class="ThreeDDarkShadow">ThreeDDarkShadow</div>
<div class="ThreeDFace">ThreeDFace</div>
<div class="ThreeDHighlight">ThreeDHighlight</div>
<div class="ThreeDLightShadow">ThreeDLightShadow</div>
<div class="ThreeDShadow">ThreeDShadow</div>
<div class="ThreeDShadow">ThreeDShadow</div>
<div class="Window">Window</div>
<div class="WindowFrame">WindowFrame</div>
<div class="WindowText">WindowText</div>
* { border-color: green; }
keep in mind using wildcard selectors is not encouraged from a performance perspective
Add border-color: green; in the .child class. See updated fiddle
You change change as below to make the border color green
.child {
border : 20px solid green;
}
If it's only divs with the child class, you can use this in your stylesheet.
.child { border-color:#00ff00!important; }
That is browser behavior, you cannot change that behavior until there is any theme you apply, what you can do is to override color by using:
border-color: green;
Here is fiddle
Use color:green. When border-color is not specified, browser uses text color of an element as its border-color
Related
If 2 elements overlap and both have the same box-shadow applied, the shadow is cumulative at the point where the elements intersect. Is there a way to make the shadow look the same even if elements overlap?
The example below shows what I mean. I've tried the various options with mix-blend-mode to no avail.
.div1,.div2 {
width: 50px;
height: 50px;
box-shadow: 1px 1px 5px 1px gray;
position: absolute;
background-color: white;
}
.div2 {
top: 25px;
background-color: green;
}
<div class="div1"></div>
<div class="div2"></div>
Use a drop-shadow on a parent element. I am using the body here but you have to consider another element based on your real code
.div1,.div2 {
width: 50px;
height: 50px;
position: absolute;
background-color: white;
}
.div2 {
top: 25px;
background-color: green;
}
body {
filter:drop-shadow(1px 1px 5px gray)
}
<div class="div1"></div>
<div class="div2"></div>
I would like to display boxes with special effects in a diagram.
The boxes should have a color based on their category (blue, orange, etc).
If the category is not defined, they should have a default color (e.g. white).
"Expandable" boxes should be displayed in a predefined color (e.g. green).
When the mouse pointer is over an expandable box, they should be displayed in their original color (based on the category). This is the tricky part.
No JavaScript should be used.
I have a working solution, but I have at least two concerns with it.
Primary problem is that the original colors need to be explicitly/redundantly defined in the :hover selectors.
Secondary problem is that the order of the CSS selectors cannot be changed freely, because it will change the behavior.
main.scss contents:
$nodeDefaultColor: white;
$nodeCategory1Color: blue;
$nodeCategory2Color: orange;
$nodeExpandColor: green;
.container {
display:flex;
}
.container > div {
margin: 10px;
}
.node {
border-style: solid;
border-width: 2px;
border-color: black;
background-color: $nodeDefaultColor;
width: 100px;
height: 100px;
}
.nodeCategory1 {
background-color: $nodeCategory1Color;
}
.nodeCategory2 {
background-color: $nodeCategory2Color;
}
.nodeExpandable {
background-color: $nodeExpandColor;
cursor: pointer;
}
.node.nodeExpandable:hover {
background-color: $nodeDefaultColor;
}
.nodeCategory1.nodeExpandable:hover {
background-color: $nodeCategory1Color;
}
.nodeCategory2.nodeExpandable:hover {
background-color: $nodeCategory2Color;
}
index.html contents:
<link rel="stylesheet" href="main.css">
<div class="container">
<div class="node nodeCategory1"></div>
<div class="node nodeCategory2"></div>
<div class="node"></div>
<div class="node nodeCategory1 nodeExpandable"></div>
<div class="node nodeCategory2 nodeExpandable"></div>
<div class="node nodeExpandable"></div>
</div>
Thanks!
Hope it's Help You
$nodeDefaultColor: white;
$nodeCategory1Color: blue;
$nodeCategory2Color: orange;
$nodeExpandColor: green;
.container {
display:flex;
> div {
margin: 10px;
}
.node {
border-style: solid;
border-width: 2px;
border-color: black;
width: 100px;
height: 100px;
background-color: $nodeDefaultColor;
cursor: pointer;
&.nodeCategory1 {
background-color: $nodeCategory1Color;
&.nodeExpandable {
&:hover {
background-color: $nodeCategory1Color;
}
}
}
&.nodeCategory2 {
background-color: $nodeCategory2Color;
&.nodeExpandable {
&:hover {
background-color: $nodeCategory2Color;
}
}
}
&.nodeExpandable {
background-color: $nodeExpandColor;
cursor: pointer;
}
&:hover {
background-color: $nodeDefaultColor;
}
}
}
Thanks
I'm trying to get a feature on my page similar to https://www.youtube.com/
Specifically, the tab on the left that includes your playlists, subscriptions, and more.
I'm trying to attempt that but without the collapse feature.
Can anyone help me out? Thanks
YouTube uses a webkit scrollbar for that section.
Here it is with the same color schemes. Do note that webkit properties are not globally supported.
.container {
max-height: 200px;
width: 50%;
overflow: auto;
}
.container::-webkit-scrollbar {
width: 10px;
}
.container::-webkit-scrollbar-track {
background: transparent;
}
.container::-webkit-scrollbar-thumb {
background: transparent;
}
.content {
height: 800px;
}
.container-dark {
background: #212121;
}
.container-dark:hover::-webkit-scrollbar-thumb {
background: #4A4A4A;
}
.container-light {
background: #fff;
}
.container-light:hover::-webkit-scrollbar-thumb {
background: #cfcfcf;
}
<div class="container container-dark">
<div class="content">some content in dark mode</div>
</div>
<div class="container container-light">
<div class="content">some content in light mode</div>
</div>
YouTube only shows the scrollbar thumb when the container is being hovered, when it isn't being hovered, the scrollbar is transparent.
*::-webkit-scrollbar {
width: 16px;
}
*::-webkit-scrollbar-track {
border-radius: 8px;
}
*::-webkit-scrollbar-thumb {
height: 56px;
border-radius: 8px;
border: 4px solid transparent;
background-clip: content-box;
background-color: #888;
}
*::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
I'm working with bootstrap panel. PSD suggest that when I hover over a panel background color and content color will change. that's fine I can do that.
but how to extend hover-color in top and bottom? and content position should stay there!
<div class="row">
<div class="col-md-4">
<div class="panel">
</div>
</div>
</div>
.panel:hover{
background-color: #13BDFF;
}
Update
Just use outline CSS property which has excellent browser support (IE8+). Demo:
.panel:hover {
background-color: #13BDFF;
outline: 5px solid #13BDFF;
}
/* just styles for demo */
.panel {
padding: 10px;
background-color: lime;
}
<div class="panel">
This is panel
</div>
Original answer (not recommended way)
You can use transparent borders (also padding can help you with this) and negative margin for this:
.panel:hover {
background-color: #13BDFF;
border: 5px solid transparent;
margin-left: -5px;
margin-top: -5px;
}
/* just styles for demo */
.panel {
padding: 10px;
background-color: lime;
}
<div class="panel">
This is panel
</div>
https://jsfiddle.net/xkqvv92p/
Here's a version using padding on hover.
.rowArea {
height: 400px;
background-color: red;
display: flex;
align-items: center;
}
#container {
margin: auto;
width: 200px;
height: 300px;
background-color: white;
border-radius: 5px;
padding: 5px;
}
#container:hover {
padding: 30px 5px;
background-color: #13C3FF;
}
<div class="rowArea">
<div id="container">hi</div>
<div id="container">hi2</div>
</div>
Changing the border color and size might solve the issue.
please refer the sample fiddle :
.panel:hover{
background-color: #13BDFF;
border-color : #13BDFF;
border:10px solid #13BDFF;
}
https://jsfiddle.net/3wkjuzbk/1/
How can I change the border-color of my outer div #refdocs_main while also changing the bottom border color of my div #refdocs_container? Right now, only the outer container's border is colored on hover; how can I get both effects using CSS simultaneously?
Here is a fiddle: http://jsfiddle.net/Nb8cC/
And what I've tried so far:
HTML
<body>
<div id="refdocs_main">
<div id="refdocs_container"><input type="text" id="refdocs">
</div>
<div id="refdocs_wrapper">
<div id="refdocs_list">
<ul></ul>
</div>
</div>
</div>
</body>
CSS
#refdocs {
border: 0;
width: 100%;
height: auto;
padding-left: 2px;
}
#refdocs_main {
border: 1px solid rgb(170,170,170);
width: 179px;
overflow: hidden;
margin-top: 2px;
}
#refdocs_main:hover {
border-color: rgb(128,128,128);
}
#refdocs_container {
border-bottom: 1px solid rgb(170,170,170);
height: 20px;
}
#refdocs_wrapper{
height: 100px;
overflow-y: scroll;
overflow-x: hidden;
}
#refdocs_list {
width: 100%;
}
#refdocs_list ul {
margin: 0;
padding: 0px;
list-style-type: none;
}
#refdocs_list li {
cursor: default;
padding: 2px;
}
Use:
#refdocs_main:hover, #refdocs_main:hover #refdocs_container {
border-color: rgb(128, 128, 128);
}
By adding #refdocs_main:hover #refdocs_container you enable the border on #refdocs_container to change only when #refdocs_main is being hovered.
jsFiddle example
Add:
#refdocs_main:hover #refdocs_container {
border-bottom: 1px solid red;
}
to your css stylesheet.
This reads when #refdocs_main is hovered over then for the #refdocs_container element apply the following changes.