I am trying to change the color of the outline when an element is active on Safari.
I need to keep all the styling of the default Safari outline, and just change the outline color.
I have tried:
a {
&:focus {
outline: auto red;
}
}
also
a {
&:focus {
outline-color: red;
}
}
when I do this
a {
&:focus {
outline: red solid 2px;
}
}
the color of the outline will change but I loose all the other styling (rounded corners and the fade), I have tried different options with outline, outline-color, outline-style. Nothing seem to work.
Am I missing some basic behavior of Safari?
Thank you!
Related
When I use the hover and visited properties on a styled component it seems to conflict.
https://codesandbox.io/s/heuristic-volhard-n03ik?file=/src/styles.css:0-326
.button:visited {
background-color: green;
}
.button:visited:hover {
background-color: red;
}
.button:hover {
background-color: blue;
}
.button {
background-color: black;
padding: 10px;
text-decoration: none;
transition: background-color 0.5s ease;
}
What I am trying to archive here is having 2 states:
not visited: black hover directly to blue
visited: green hover directly to red
But in Firefox it seems to ignore the visited state on hover and go from green to blue to red. (In chrome it seems to work perfectly)
Does anyone has experience with this and know how to fix it?
How do I change link and background colours of a.btn.btn-default / btn.btn-default? I can’t find these in any CSS.
See here: https://www.webhosters.co.za/client/whois . There are two buttons at the bottom of the 404 error page. These buttons (home page and contact support) are in white text and white background. they are only visible when one hover over. How do I change the background and text?
Here is the small css snippet you can go through
section#main-body a.btn {
color: #fff;
background-color: #6aaf08;
border: 1px solid #6aaf08;
}
We are here inheriting button class Hope this helps
Happy coding!!
You can give class to that buttons and apply css on that like change in btn background and color
.contact-btn, homepage-btn{
background-color: #6aaf08 !important;
color: #fff !important;
}
or
you can add more parents to .btn-default so your css will be applied first and will be replace .btn-default property
#main-body .btn.btn-default {
background-color: #6aaf08;
color: #fff;
}
/* ------------------ or ------------ /*
if you don't want to add parents class in css you need to give important to that css property..
.btn.btn-default {
background-color: #6aaf08 !important;
color: #fff !important;
}
Great place for styling links is here
so, basically you would be looking for something like:
/* unvisited link */
a:link {
color: red;
background-color: white
}
/* visited link */
a:visited {
color: green;
background-color: white
}
/* mouse over link */
a:hover {
color: hotpink;
background-color: white
}
/* selected link */
a:active {
color: blue;
background-color: white
}
/* Site */
::-webkit-selection {
background-color: #highlightBackground;
color: #highlightColor;
}
::-moz-selection {
background-color: #highlightBackground;
color: #highlightColor;
}
::selection {
background-color: #highlightBackground;
color: #highlightColor;
}
I am using semantic-ui as css framework, and I have been overriding its values today. I came across with selection option, which is overridden by default, and I would like to set it as computer default. As some of you know, you can change selection color in macbooks, so I would like my users to use computer's default selection color.
So, what should I do? I tried inherit and transparent but they don't work.
The solution is to use the system color highlight for the background and highlighttext for the foreground.
Colors like inherit won't work, because inherit means "use the same color as the parent element". That's not what we want!
The first example sets the selection colors to yellow on brown, to emulate the framework theme. Just to make sure changing those colors works at all.
/* colours from theme */
::-webkit-selection {
background-color: brown; color: yellow;
}
::-moz-selection {
background-color: brown; color: yellow;
}
::selection {
background-color: brown; color: yellow;
}
<div>This is a div in which you can make a selection</div>
Then we'll add the colors highlight and highlighttext to the end of the css (emulating our custom stylesheet) to show that the selection color is back to the default.
/* colours from theme */
::-webkit-selection {
background-color: brown; color: yellow;
}
::-moz-selection {
background-color: brown; color: yellow;
}
::selection {
background-color: brown; color: yellow;
}
/* overriding colors */
::-webkit-selection {
background-color: highlight; color: highlighttext;
}
::-moz-selection {
background-color: highlight; color: highlighttext;
}
::selection {
background-color: highlight; color: highlighttext;
}
<div>This is a div in which you can make a selection</div>
Disclaimer: these system colors are officially deprecated; there is no proper replacement yet though. Also, in Chrome it seems to reset the colors to slightly different ones than they have in the absence of any styles; I seem to have to do some more research.
So text selection was made stylable trough the ::selection pseudo element in order to override the browser's default selection color. But to me, it seems that white as a selection background color is forbidden in favor of a greyish, opaque color.
::selection { color: black; background: white; }
::-moz-selection { color: black; background: white; }
body {
background: black;
color: white;
}
So selecting me is supposed to invert the text and background colors. But the selected text background color is not white, but grey.
Why does this not create a perfectly white background ? Instead, it shows a grey background (#989898)
Also see this snippet on https://jsfiddle.net/duk3/hzodm1sh/
Ok so following this question I found the answer :
For some reason Chrome forces it to be semi-transparent. However, you
can get around this by setting the background using rgba. I have set
the alpha value to be just 0.01 less than 1.
::selection { color: black; background: rgba(255, 255, 255, 0.996);
; }
body {
background: black;
color: white;
}
Selecting me DOES invert the text and background colors. Well, almost, but it looks like perfect white.
Maybe it's a browser specific problem.
Try this:
Fiddle
::selection {
color: black;
background: white;
}
body {
background: black;
color: white;
}
::-moz-selection {
color: black;
background: white;
}
So selecting me is supposed to invert the text and background colors.
Here is the result in a print:
Here's this ridiculous question.
I am trying to apply some color to my css.
.navbar-custom {
background-color: none;
border-color: none;
}
This applies the color to my nav.
But shouldn't the below code just remove all the colors from the navbar If any?
.navbar-custom {
background-color: none;
border-color: none;
}
none is not a valid value for background-color or border-color.
For CSS2.1 and CSS3
You can probably set value to transparent or any other color instead
DEMO using transparent
For CSS3 you can use unset as value for them
DEMO using unset