I have a little problem with the visited pseudo-class and the text-shadow property in CSS.
Here is my code:
li.episode a{
display: block;
float: left;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
margin: 1px;
padding: 5px;
font-size: 14px;
background-color: #eeeaea;
text-shadow: 0 1px 0 white;
}
li.episode a:visited {
background-color: #23EE44;
text-shadow: none;
color: white;
}
li.episode a:hover {
background-color: #23EE44;
text-shadow: 0 1px 0 #10C72E;
color: white;
}
In fact what I would like to have is the visited link just the same as when hovered.
:Hover works fine on Chrome/Safari but the visited link keeps the first text-shadow property:
text-shadow: 0 1px 0 white;
Instead of the one given below (I tried to use "none" in my code but doesn't seem to work..)
Thanks guys for your help !
There are a very few css properties you can explicitly define for :visited due to security issues.
MDN defines the modifyable properties as (these may vary by browser, but text-shadow is certainly one that shouldn't work on any browser, at least modifying the size of it):
color
background-color
border-color
outline-color
And in addition you won't be able to define opacity or show/hide the links if the base a selector has done one of those things.
Related
I'm having some issues trying to style the :focus state for text links in my SCSS design system, to ensure accessibility on keyboard navigation but also to make it look a bit nicer than the stock box outline.
I've managed to get it working cross-browser for text fields and buttons by using outline:none; and replacing it visually with box-shadow: 0 0 0 2px $color. I have to do this because Safari's focus outline doesn't follow border-radius.
Here's how it looks for form fields:
three text fields, the first of which has a custom focus state border
But for text, it still has the blue outline:
snippet of text with visited links, one has focus but still has a blue outline
html {
box-sizing: border-box;
font-size: 16px;
}
a {
color: #0000ff;
text-decoration: underline;
}
p {
color: #3b3b3b;
font-family: system-ui;
line-height: 1.5;
padding-left: 1rem;
padding-right: 1rem;
}
a:visited {
color: purple;
}
a:focus-visible {
text-decoration: none;
background-color: #0000ff;
color: white;
outline: 0;
box-shadow: 0 0 0 2px #0000ff;
border-radius: 2px;
}
a:visited:focus-visible {
text-decoration: none;
background-color: purple;
color: white;
outline: 0;
box-shadow: 0 0 0 2px purple;
border-radius: 2px;
}
<p>Here is some text. Here's one link. And here is some other text in between. And here is another link. Another link.</p>
Here's a CodePen demo.
As you can see, when you use tabs or keyboard navigation, when a visited link has :focus, it gets the correct background and text color, but still has a blue focus border, and I can't seem to get rid of it.
Using the Inspector, I can't see any other styles that are overriding it. It does follow the border-radius, so I'm just kind of confused as to where it's coming from.
CSS is supposed to let you stack basic selectors like :visited and :focus-visible, right?
For reference, this isn't exclusive to Safari, it happens in Chrome and Firefox as well, so it does seem to be CSS-related.
I was styling a <a> and it was all working great. But after 5 min when i came back and restart the live-server of node. Border just turned to violet and active state have a color of red. The code is below.
(Have restart the server, cleared the cache.)
html
<a href="#" class="learnmore-btn">
Learn More →
</a>
CSS
.learnmore-btn:link{
color: $color-primary-light;
padding: 1rem;
font-weight: 700;
font-size: 1.3rem;
text-decoration: none;
border: .1rem solid $color-primary-light;
border-bottom: .3rem solid $color-primary-light;
transition: all ease .2s;
&:hover{
background-color:$color-primary-light;
color: white;
box-shadow: 0 .5rem 1rem $color-primary-dark;
transform: translateY(-3px);
}
}
The variables
$color-primary-light:#7ed56f;
$color-primary-dark:#28b485;
Using the pseudo class :link you style only unvisited links. As soon as you click the link the browser marks it as visited and your styling doesn't apply anymore. The violet color is the default for visited links in most browsers. Removing :link should fix the issue.
I am wondering if its possible to remove the default blue and yellow glow when I click on a text input / text area using CSS?
Edit (11 years later): Don't do this unless you're going to provide a fallback to indicate which element is active. Otherwise, this harms accessibility as it essentially removes the indication showing which element in a document has focus. Imagine being a keyboard user and not really knowing what element you can interact with. Let accessibility trump aesthetics here.
textarea, select, input, button { outline: none; }
Although, it's been argued that keeping the glow/outline is actually beneficial for accessibility as it can help users see which Element is currently focused.
You can also use the pseudo-element ':focus' to only target the inputs when the user has them selected.
Demo: https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/
This effect can occur on non-input elements, too. I've found the following works as a more general solution
:focus {
outline-color: transparent;
outline-style: none;
}
Update: You may not have to use the :focus selector. If you have an element, say <div id="mydiv">stuff</div>, and you were getting the outer glow on this div element, just apply like normal:
#mydiv {
outline-color: transparent;
outline-style: none;
}
On textarea resizing in webkit based browsers:
Setting max-height and max-width on the textarea will not remove the visual resize handle. Try:
resize: none;
(and yes I agree with "try to avoid doing anything which breaks the user's expectation", but sometimes it does make sense, i.e. in the context of a web application)
To customize the look and feel of webkit form elements from scratch:
-webkit-appearance: none;
I experienced this on a div that had a click event and after 20 some searches I found this snippet that saved my day.
-webkit-tap-highlight-color: rgba(0,0,0,0);
This disables the default button highlighting in webkit mobile browsers
Carl W:
This effect can occur on non-input elements, too. I've found the following works as a more general solution
:focus {
outline-color: transparent;
outline-style: none;
}
I’ll explain this:
:focus means it styles the elements that are in focus. So we are styling the elements in focus.
outline-color: transparent; means that the blue glow is transparent.
outline-style: none; does the same thing.
This is the solution for people that do care about accessibility.
Please, don't use outline:none; for disabling the focus outline. You are killing accessibility of the web if you do this. There is a accessible way of doing this.
Check out this article that I've written to explain how to remove the border in an accessible way.
The idea in short is to only show the outline border when we detect a keyboard user. Once a user starts using his mouse we disable the outline. As a result you get the best of the two.
If you want to remove the glow from buttons in Bootstrap (which is not necessarily bad UX in my opinion), you'll need the following code:
.btn:focus, .btn:active:focus, .btn.active:focus{
outline-color: transparent;
outline-style: none;
}
This solution worked for me.
input:focus {
outline: none !important;
box-shadow: none !important;
}
some times it's happens buttons also then use below to remove the outerline
input:hover
input:active,
input:focus,
textarea:active,
textarea:hover,
textarea:focus,
button:focus,
button:active,
button:hover
{
outline:0px !important;
}
<select class="custom-select">
<option>option1</option>
<option>option2</option>
<option>option3</option>
<option>option4</option>
</select>
<style>
.custom-select {
display: inline-block;
border: 2px solid #bbb;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #f8f8f8;
-webkit-appearance:none; /* remove the strong OSX influence from Webkit */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* for Webkit's CSS-only solution */
#media screen and (-webkit-min-device-pixel-ratio:0) {
.custom-select {
padding-right:30px;
}
}
/* Since we removed the default focus styles, we have to add our own */
.custom-select:focus {
-webkit-box-shadow: 0 0 3px 1px #c00;
-moz-box-shadow: 0 0 3px 1px #c00;
box-shadow: 0 0 3px 1px #c00;
}
/* Select arrow styling */
.custom-select:after {
content: "▼";
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #bbb;
color: white;
pointer-events:none;
-webkit-border-radius: 0 6px 6px 0;
-moz-border-radius: 0 6px 6px 0;
border-radius: 0 6px 6px 0;
}
</style>
I found it helpful to remove the outline on a "sliding door" type of input button, because the outline doesn't cover the right "cap" of the sliding door image making the focus state look a little wonky.
input.slidingdoorbutton:focus { outline: none;}
I just needed to remove this effect from my text input fields, and I couldn't get the other techniques to work quite right, but this is what works for me;
input[type="text"], input[type="text"]:focus{
outline: 0;
border:none;
box-shadow:none;
}
Tested in Firefox and in Chrome.
Sure! You can remove blue border also from all HTML elements using *
*{
outline-color: transparent;
outline-style: none;
}
And
*{
outline: none;
}
Since you can underline any text in CSS like so:
h4 {
text-decoration: underline;
}
How can you also then edit the 'line' that is drawn, the color you get on the line is easily specified as color: red but how does one edit the height of the line, i.e. the thickness?
Here is one way of achieving this :
HTML :
<h4>This is a heading</h4>
<h4><u>This is another heading</u></h4>
CSS :
u {
text-decoration: none;
border-bottom: 10px solid black;
}
Here is an example: http://jsfiddle.net/AQ9rL/
Recently I had to deal with FF which underlines were too thick and too far from the text in FF, and found a better way to deal with it using a pair of box-shadows:
.custom-underline{
box-shadow: inset 0 0px 0 white, inset 0 -1px 0 black
}
First shadow is put on top of the second one and that's how you can control the second one by varying the 'px' value of both.
Plus: various colors, thickness and underline position
Minus: can not use on non-solid backgrounds
Here I made couple of examples:
http://jsfiddle.net/xsL6rktx/
There is text-decoration-thickness, currently part of CSS Text Decoration Module Level 4. It's at "Editor's Draft" stage - so it's a work in progress and subject to change. As of October 2022, it has about 93% coverage so it's pretty safe to use.
The text-decoration-thickness CSS property sets the thickness, or
width, of the decoration line that is used on text in an element, such
as a line-through, underline, or overline.
a {
text-decoration-thickness: 2px;
}
Codepen: https://codepen.io/mrotaru/pen/yLyLOgr (Firefox only)
There's also text-decoration-color, which is part of CSS Text Decoration Module Level 3. This is more mature (Candidate Recommendation) and is supported in most major browsers (exceptions are Edge and IE). Of course it can't be used to alter the thickness of the line, but can be used to achieve a more "muted" underline (also shown in the codepen).
Very easy ... outside "span" element with small font and underline, and inside "font" element with bigger font size.
<span style="font-size:1em;text-decoration:underline;">
<span style="font-size:1.5em;">
Text with big font size and thin underline
</span>
</span>
Another way to do this is using ":after" (pseudo-element) on the element you want to underline.
h2 {
position:relative;
display:inline-block;
font-weight:700;
font-family:arial,sans-serif;
text-transform:uppercase;
font-size:3em;
}
h2:after {
content:"";
position:absolute;
left:0;
bottom:0;
right:0;
margin:auto;
background:#000;
height:1px;
}
I will do something simple like :
.thickness-underline {
display: inline-block;
text-decoration: none;
border-bottom: 1px solid black;
margin-bottom: -1px;
}
You can use line-height or padding-bottom to set possition between them
You can use display: inline in some case
Demo : http://jsfiddle.net/5580pqe8/
The background-image can also be used to create an underline. This method handles line breaks.
It has to be shifted down via background-position and repeated horizontally. The line width can be adjusted to some degree using background-size (the background is limited to the content box of the element).
.underline
{
--color: green;
font-size: 40px;
background-image: linear-gradient(var(--color) 0%, var(--color) 100%);
background-repeat: repeat-x;
background-position: 0 1.05em;
background-size: 2px 5px;
}
<span class="underline">
Underlined<br/>
Text
</span>
a {
text-decoration: none;
position: relative;
}
a.underline {
text-decoration: underline;
}
a.shadow {
box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}
<h1>Default: some text alpha gamma<br>the quick brown fox</h1>
<p>Working:</p>
<h1>Using Shadow: some text alpha gamma<br>the quick brown fox<br>even works with<br>multiple lines</h1>
<br>
Final Solution:
http://codepen.io/vikrant-icd/pen/gwNqoM
a.shadow {
box-shadow: inset 0 -4px 0 white, inset 0 -4.5px 0 blue;
}
Thanks to the magic of new css options this is now possible natively:
a {
text-decoration: underline;
text-decoration-thickness: 5px;
text-decoration-skip-ink: auto;
text-underline-offset: 3px;
}
As of yet support is relatively poor. But it'll land in other browsers than ff eventually.
My Solution :
https://codepen.io/SOLESHOE/pen/QqJXYj
{
display: inline-block;
border-bottom: 1px solid;
padding-bottom: 0;
line-height: 70%;
}
You can adjust underline position with line-height value, underline thickness and style with border-bottom.
Beware to disable default underline behavior if you want to underline an href.
Now, as can be seen in the picture below, the property is fully supported in most browsers (according to Mozilla).
So, you can use the following attributes:
.thin {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 1px;
}
.thick {
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-color: red;
text-decoration-thickness: 5px;
}
.shorthand {
text-decoration: underline solid red 5px;
}
(example code from Mozilla).
So I'm using the following CSS to create a button style;
.button {
display: inline-block;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
font-weight:bold;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
padding: .5em 2em .55em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
That combined with some other classes to add colour and give hovering and press effects works great.
I've applied this style to various html tags across the site;
<span>
<a href>
<button>
<input type="button">
<input type="submit">
All of them look great and work great in Chrome and (amazingly) IE7-9 (less so in IE7-8 but ok).
But in Firefox the input type tags appear almost twice the size of the a href type ones. Whats causing this?
Here is an example.
using of em might cause this behaviour...
Add a line-height attribute.
something like:
line-height:20px;
should do it.
Firefox uses different line-height for different elements. If you check with firebug, the a has a line-height of 14px, while the inputs have a line-height of 17px.
Well, I used a combination of all three suggestions from Pablo Rincon, ThomasK and beanland.
None of them helped in isolation but together they all seem to work!
Added a CSS reset, not all of them worked but found this one; http://github.com/necolas/normalize.css
Changed the em's to px's.
Set line-height on .button to 17px.
Perfect. Cheers.