I'm trying to improve accessibility on a WordPress site where 'focus' is missing from the stylesheet.
I understand how to style text links, but I can't seem to apply the same to image links. I'd like to put a dashed line beneath images when in focus.
Here's what I've put - pretty simple:
a img:hover {border-bottom: 3px dashed #000;}
a img:focus {border-bottom: 3px dashed #000;}
It works for hover, but not focus!
Any ideas?
Just move the pseudo-classes to the a element:
a:hover img {border-bottom: 3px dashed #000;}
a:focus img {border-bottom: 3px dashed #000;}
User agents generally do not consider img elements as accepting focus. From the w3 CSS spec:
The :focus pseudo-class applies while an element has the focus
(accepts keyboard events or other forms of text input).
You can enable focus on img elements by adding a tabindex attribute (<img src="foo.png" tabindex="0" alt="photo of foo">) but I wouldn't recommend it unless you have some specific reason for doing so. Unless the element actually accepts keyboard input adding it to the tabbing order adds no benefit for AT users (and indeed, may be confusing).
Related
I have a question on accessibility on a postchat survey window which I've worked on.There's a close button on the top right(as an image of X) where I've included visual focus by putting focus pseudo class, now the problem i'm facing is that the close button has white border around it when it is focused and this is happening as expected in chrome, Mozilla but in IE a blue border is coming. Can someone help me how to remove this blue border and bring white in its place?
I'm sharing the code snippet where I've used focus
a.close-link:focus {
outline: 1px dotted white;
}
Though active and focus are to different states but you can try both at same time for your purpose i think
:active Adds a style to an element that is activated
:focus Adds a style to an element that has keyboard input focus
:hover Adds a style to an element when you mouse over it
:lang Adds a style to an element with a specific lang attribute
:link Adds a style to an unvisited link
:visited Adds a style to a visited link
following source http://www.w3schools.com/CSS/css_pseudo_classes.asp
a.close-link:focus, a.close-link:active {
outline: 1px dotted white;
}
:FOCUS pseudo-class does work in IE, Instead, I believe your problem is with outline property.
Try this:
IE 9
George Langley wrote in to say that IE 9 apparently doesn't allow you
to remove the dotted outline around links unless you include this meta
tag:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
((source))
Well i've found out a workaround. For IE9 border comes by default so I've removed border now and the blue outline is no more there!
a.close-link:focus {
outline: 1px dotted white;
}
a.close-link img {
border: none;
}
With the following HTML:
<input type="text">
And the CSS:
input[type="text"] {outline: none; border: thin solid red}
input[type="text"]:active {border: thin solid yellow}
I hoped that the text field would have a yellow border when it is active (when the user is typing). However, the new style only applies when you are clicking on the element. How can I reach the effect I want?
You should use :focus:
input[type="text"]:focus {border: thin solid yellow}
JSFiddle Demo.
From W3C:
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
The :focus pseudo-class applies while an element has the focus (accepts keyboard or mouse events, or other forms of input).
I have many SELECT elements on a page, the problem is that in IE11 they have an outline which I try to remove it using CSS :
select{outline:none;}
It works fine as long as , it is the only style element! As soon as I add more style e.g background-color to SELECT, the outline:none does not work anymore!
It should work in IE and for SELECT element. However in other browser, there is no outline applied to element by default.
thanks in advance
By using a bit CSS you can get same style across all browser.
Check the DEMO.
select{
outline:none;
border:1px solid #E4E4E4;
padding:10px;
width:200px;
background: none repeat scroll 0 0 #F7F7F7;
}
I want a items that have the tag class to be grayed (with a rounded border) when the mouse moves over and when the item(s) are clicked.
A sample item might look like this <span class="tag">Some value</span>
I was hoping this would give the desired result, (tag:hover works as hoped, but tag:active doesn't):
.tag{
}
.tag:hover{
background:#CCC;
padding:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tag:active{
background:#CCC;
padding:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
You can use jQuery to permanently add a class to your span. You could do it like this:
.tag:hover, .tag.everclicked{
background:#CCC;
padding:4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
And in jQuery:
$(document).ready(function()
{
$('.tag').click(function()
{
$(this).addClass('everclicked');
});
});
http://jsfiddle.net/r4gQQ/2/
You have the same CSS styles defined for both pseudo-classes. An :active element will usually have :hover too (depending on the browser), as it is applied whilst the mouse button is down on the element.
If you want the styles to stay applied when you've clicked and moved away from the element, you'll need to use JavaScript or, alternatively, give the element a tabindex attribute and use the :focus pseudo-class. Using #Marnix's test case, for example, http://jsfiddle.net/r4gQQ/1/.
First things first, the CSS for your :hover and :active states is identical, so you'll not see any change!
According to the specs for CSS on w3.org, :active used to only apply to hyperlinks in CSS1, but that's no longer the case. I couldn't find any explicit statement regarding what elements it works for now, so I'm just going to assume it works everywhere unless someone else knows better. It could be that it still only applies to elements the user is meant to "activate" by clicking, such as links and form buttons.
If :active does indeed apply to any kind of element now, then the above CSS should work as you want, provided you change the :active style to be different from the :hover style of course!
If it doesn't, then either there are still restrictions in CSS as to where you can use hover, or there's a bug in the CSS engine of your browser that restricts where you can apply the :active style in a way that goes against the current CSS specs. If the latter is the case, then you could use javascript to add a class on mousedown to the clicked element and remove it again on mouseup or mouseout. You can then style the active class in CSS as normal.
Because CSS text underline only allows a solid line and its position is right at the bottom of strings, I'm using border-bottom plus a little padding to achieve dotted or dashed text underline.
h2{border-bottom:1px dotted #999; padding-bottom:5px;}
now, the problem is, when the heading (or paragraph, or whatever element) text takes 2 lines or more, the dotted underline simply does what every border does, which is stay on the bottom of the block element. If I use text-underline style, the underline stays with the text, but text-underline only supports a solid line, and as far as I know, no padding.
So how do I display multi line texts with dotted or dashed underline ?
Thanks
h2 {
border-bottom: 1px dashed #999;
display: inline;
}
So you receive what you need.
But you have to keep in mind that <h2> is then (of course) no longer a block element. But you can "avoid" that by putting a <h2> in a <div>.
A "bit" late, but there's a way with text-decoration-style and text-decoration-line to customize the underline in some browsers.
.underline-dashed {
decoration-line: underline;
decoration-style: dashed;
}
Example:
.underline-dashed {
text-decoration-line: underline;
text-decoration-style: dashed;
}
This is some <span class="underline-dashed">dashed underlined</span> text.
I was also facing similar issue but with <a> tags. In my case it was css float property that was causing the border to appear only under the last line. So I enclosed the <a> tags with <span> tags and moved the css float:left to <span>. It fixed the issue now bottom border appears under all the lines whenever a long link is wrapped to fit the containing div.
The revised css style and HTML structure is as follows:
a { border-bottom:1px dotted red; }
span.nav-link { float:left; }
<span class="nav-link">Test link</span>
Hope it helps someone.
Thanks,
text-decoration: underline dotted;
text-decoration: underline dashed;