I'm making mobile apps in which there are several span tags in the html and I have applied border to the span without defining the color so that the border would be as per it's color.
here is a demo
So now, I wanted to change the color of span tags on active but not it's border-color and this is why I was trying to make it by setting initial value but seems there's no support for the initial value in border-color.
span:active{
color: red;
border-color: initial;
}
I can manage each colored element active state border-color but it takes a lot of works. Is there any standard way to make element change on its element only but not on it's border?
You can set border-color: inherit:
span:active{
color: red;
border-color: inherit;
}
Take a look here: box model
fiddle
use inherit not initial.
border-color: inherit;
Changing from initial to inherit will do the trick
span:active{
color: red;
border-color: inherit;
}
Working JS Fiddle:
http://jsfiddle.net/fapr39e7/2/
Related
I want to modify the color and the border in a Bootstrap nav bar but when I write this on my SCSS nothing happens:
.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
When I inspect the element in Chrome my code is dismissed, It only takes into account the Bootstrap default style.
Image
Any help will be welcomed.
Thanks.
For a CSS rule to be overriden, you have a lot of options. The cleanest would be to be more specific (by at least one rule) than the one you want to override.
If I follow your example:
.nav-tabs li.nav-link.active {
color: #495057;
background-color: chartreuse;
border-color: black;
}
You'll find more informations here : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I am styling some popups for a map displayed through Mapbox using Mapbox's GL JS. However, I cannot find in their documentation regarding the classes that are automatically assigned to the popups. Thus far, my CSS looks like this:
.mapboxgl-Popup-content {
color: #F3F3DD;
background-color: #91785D;
border-color: #91785D;
max-width: 250px;
box-shadow: 3px 3px 2px #8B5D33;
font-family: 'Oswald';
}
This yields these pretty little boxes:
My issue is the white triangle at the very bottom that points to the marker. I want to change its color.
I have tried a number of CSS classes to fix this. Including, but not limited to, .mapboxgl-popup, .mapboxgl-popup-anchor, .mapboxgl-popup-pointer, etc. I am not sure where to acquire the documentation I need to know what CSS class I should be using to change the color of this pesky triangle.
Here's what you need. It's not just one class because the tip can change position:
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip {
border-bottom-color: #fff;
}
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
border-top-color: #fff;
}
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
border-right-color: #fff;
}
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
border-left-color: #fff;
}
The CSS class that you need to update is ".mapboxgl-popup-tip". If there is no any class like that in your CSS file, just create it and give the color what you want to "border-top-color: " attribute.
I figured out why applying CSS doesn't affect the element (in this case, the tip).
I did some debugging in Chrome with Inspect Element.
It turns out my CSS was indeed being applied; however, it was being overridden from the MapBox stylesheet I applied in my index.html.
At first, I thought that maybe if I reordered my stylesheets I could have my stylesheet be invoked after the MapBox stylesheet, then I'd be fine.
This was not true.
Inspect element still showed my CSS was being overridden.
The solution was to add !important:
border-top-color: black !important;
This would override any previous styling done by MapBox.
For more info see:
What do the crossed style properties in Google Chrome devtools mean?
https://www.w3schools.com/css/css_important.asp
.mapboxgl-popup-anchor-bottom > .mapboxgl-popup-tip { border-top-color: #f15b28; }
i finally got it how this works. <Popup archor={'bottom'}, use .mapboxgl-popup-anchor-bottom plus .mapboxgl-popup-tip changing border color (top, bottom, left, right).
I have an anchor element that I want to draw a border around when the cursor hovers over it. The problem is that the anchor text and everything to its right "jumps" slightly to the right when the border is drawn.
I thought I'd be clever and style the anchor with a border of the background color (via "inherit") so that a default border is drawn when there is no hover. Then, when the user hovers, the red border is simply drawn over the background border and the text should not jump to the right. But this approach does not work.
The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn? Secondarily, I would like to know how to prevent the text from jumping.
Here are the styles and a JSFiddle: https://jsfiddle.net/tlbaxter99/zoLr4m8j/6/
a:link, a:visited {
border: 1px solid inherit;
}
a:hover {
border: 1px solid red;
}
The main reason I am posting is to understand why my strategy of using the inherited color to draw the border does not work. In other words, why is it that a border of the inherited color is not drawn?
It's not working because 1px solid inherit is an invalid value:
According to MDN, you can't use the inherit value as part of a shorthand declaration (like in your case). Here is the relevant, in-depth quote:
Only the individual properties values can inherit. As missing values are replaced by their initial value, it is impossible to allow inheritance of individual properties by omitting them. The keyword inherit can be applied to a property, but only as a whole, not as a keyword for one value or another. That means that the only way to make some specific value to be inherited is to use the longhand property with the keyword inherit.
Which means that you would need to use the longhand border-color property in order to inherit the border-color value:
Example Here
a:link,
a:visited {
border: 1px solid;
border-color: inherit;
}
Secondarily, I would like to know how to prevent the text from jumping.
If you don't want the inherited border color, simply use a transparent border to displace the added border:
Example Here
a {
border: 1px solid transparent;
}
a:hover {
border: 1px solid red;
}
Alternatively, rather than using a border, you could also use the outline property to add an outline to the element that doesn't affect the element's box model:
Updated Example
a:hover {
outline: 1px solid red;
}
You need to tell the initial position about the border too. So initially, give transparent border, giving the space.
body {
padding: 1em;
}
a:link,
a:visited {
border: 1px solid transparent;
}
a:hover {
border: 1px solid red;
}
<p>
Hello This is a link and here is more text, <b>which doesn't move</b>.
</p>
Now it dares not to move. :) The reason why inherit doesn't work is, none would be the inherited value and it causes border to be 0px. (I am not sure, but that's what is compiled.)
instead of using inherit , try
transparent
Then your css class will look like the one below
a:link, a:visited {
border: 1px solid transparent;
}
This will make sure the border space is already taken and when you hover it doesn't hurt
I have a problem in one of my GridView headers in my ASP.net website. I want to show white text on green background color in my header cells. I also want to keep my border color on those cells black.
Here is the CSS I'm using for the headers:
.myHeaders
{
color: White;
font-size: 7pt;
background-color: Green;
border-color: Black
}
I'm referencing it in the Gridview with the HeaderStyle property:
<HeaderStyle CssClass="myHeaders" />
This works fine in Chrome and IE, but in firefox the border-color gets set to the same value as the forecolor! How can I get this to work?
Thanks!
Firefox does not support border-color on table elements. Just use the border shorthand property (border: 1px solid black). That should also work in other browsers.
Why don't you just right-click your GridView and choose "AutoFormat" so that you can customize colors for your GridView. ?
Using border-color by itself apparently does not work. You should use at least border-style to set the border first.
.myHeaders
{
color: White;
font-size: 7pt;
background-color: Green;
border-style: Solid;
border-color: Black
}
You're settings the color of a row or tr-tag. This means that any child element inside the row inherits this color. Firefox follows the CSS-rules, which dictate that all four borders should have a color defined, if they don't, the default color will be used, i.e. color: red.
.myHeaders {
color: Red;
}
This is why every border turns red (or white, in your case).
You should set the border color of any sibling to inherit. This will force Firefox to ignore the color and find the closest border-color definition in it's inherited tree.
tr.myHeaders > td, tr.myHeaders > th {
border-color: inherit;
}
I ended up adding:
foreach (TableCell tc in e.Row.Cells)
{
tc.Attributes["style"] = "border-color: Black";
}
In the RowDataBound event of my GridView. This worked.
I got the idea from:
http://www.codersbarn.com/post/2009/05/31/Set-Color-of-GridLines-in-Gridview.aspx
I'm unhappy that I had to use a code-behind solution, but don't feel like spending more time on it right now! Thanks for all your posts!
I'm trying to modify the default selection styles by using the ::selection and ::-moz-selection pseudoelements. I've successfully changed the selection color and background with these two rules:
::-moz-selection{ background: #444; color:#fff; text-shadow: none; }
::selection { background:#444; color:#fff; text-shadow: none; }
However, I also need to change the border-color to white on selection for links. I'm trying to accomplish this with this CSS:
a::-moz-selection { border-color:#FFF;}
a::selection {border-color:#FFF; }
Even when I add an !important override, Safari won't style the border color.
What am I missing? Why can't I change a link's border-color on selection?
You can't define border styles for text selections.
Try defining an outline instead (it was going to be one of the allowed properties as stated in the old spec and the SitePoint Reference):
a::-moz-selection { outline: 1px solid #fff; }
a::selection { outline: 1px solid #fff; }
If that doesn't work, then I'm afraid the browser just doesn't support outlines on ::selection.
Remember that ::selection has been move out of the Selectors spec, with the rest of CSS level 3 still being a draft, so you can't rely on browsers implementing it correctly/completely just yet.