I'm trying to visually identify my iframe for users navigating with the keyboard e.g. tabbing
From what i can tell, only :hover has an impact
iframe { border: 1px solid #fff; }
iframe:hover { border: 1px solid #000; }
When trying to use :focus or :active they have no effect:
iframe:focus, iframe:active{ border: 1px solid #f00; }
How do we let visitors know they have tabbed to an iframe element? I'm not trying to style the contents of the iframe, just the iframe itself. Why does it support :hover but not the others?
Update
tabindex is not an option
a) it doesn't work: https://jsfiddle.net/qk034swn/
b) the page becomes invalid if using XHMTL
Simply adding a :focus or :active in CSS won't be enough, since the iframe is not "focusable".
Edit -
Now, for the solution
tabindex attribute can be used.. After exploring a bit I discovered that this can't be done.
Here is a simple way to do that
HTML - <iframe src="http://foo.com"></iframe>
CSS - a:focus iframe{border:3px solid red;}
In short, we will be using <a> tag to make iframe focusable. Demo - https://jsfiddle.net/ctqfacgw/1/
Is the actually tabable? I think you need make the tab key actually focus on the instead of something in the contents of the . You would need to have an href set on the element or use the global HTML attribute tab-index="0" (0 so it doesn't interrupt the normal flow of tabbing).
Related
I'm trying to style the outline of the field when in focus because my current outline is very hard to see. I know that some html elements are focusable by default, so I'm not quite sure to what element to attach the outline style.
Do I need to target all the potentially focusable elements? Like
a:focus, button:focus {outline: 1px solid white; }
(including all the other elements)? This does not seem like the right method.
I have tried searching for the answer and all I can find is that outline must not be none but other than then, I haven't found anything else.
Just go
:focus { outline: 1px solid white; }
to target all focussable elements. No need to specify those elements explicitly.
Btw, this is short for
*:focus { outline: 1px solid white; }
Lets say I have a code something like
<input type='text' />
<br />
<iframe>
<input type='text'>
</iframe>
and a style
input[type='text'] {
border: 1px solid black;
}
and I wanted the styles to be applied only to elements outside the iframe. How would I be able to achieve it? I was actually looking at the css :not selector but I am confused on how I should use it. I'd like to achieve something like
input[type='text'], input:not(iframe) {
border: 1px solid black
}
or Apply styles to all input of type text BUT NOT to input of type text inside an iframe.
It's not possible to select elements outside some element with CSS.
You have to create a class with the desired style definition and apply it to all inputs individually.
The :not selector can be used to select ALL elements but the one specified as argument e.g: :not(p) will select all element from the page except paragraphs.
input[type="text"]{border: 1px solid #000}
iframe input[type="text"]{border: none}
It should work as listed. Iframes are isolated and should have their own styles, are you including the same style-sheet on both pages?
Can you style a <abbr> tag using css? In firefox, it is displayed with dots underneath the words like in the picture below:
Is this a browser by browser thing? can you remove the dots or do you just use the title="title here" option?
thanks
Firefox 40 has a small change:
https://developer.mozilla.org/en-US/Firefox/Releases/40/Site_Compatibility#CSS
To remove default underline in Firefox, you now need to set CSS:
text-decoration: none;
Can you style a tag using css?
Yes, you can.
In firefox, it is displayed with dots underneath the words
Yes. Firefox default style is
abbr[title], acronym[title] {
border-bottom: 1px dotted;
}
Is this a browser by browser thing?
Yes, this behaviour is determined by the default stylesheet of each browser. Then, different browsers may display it different by default.
Can you remove the dots?
Yes, just override the default syle:
abbr[title], acronym[title] {
border-bottom: none;
}
It is possible to style the tag with CSS for modern browsers. However, a fallback for older browsers with JavaScript may be used. (But who wants to support IE 8?)
abbr {
position: relative;
}
abbr:hover::after {
position: absolute;
bottom: 100%;
left: 100%;
display: block;
padding: 1em;
background: yellow;
content: attr(title);
}
This will add an absolutely positioned pseudo element top right of the tag using the attribute content within the title when the tag is hovered over.
Mr. Bunnyman.
Seems like your experiencing a cross browser issue.
Yes, you can style <abbr> tag. Example below.
abbr { border: 2px dashed red; }
If your experiencing an underline on a certain browser, try:
abbr { border-bottom: 0px !important; }
Can you style a <abbr> tag using css?
Yes, but you cannot style the title attribute—though you can fake it unreliably.
Is this a browser by browser thing?
Yes, default styles are set in the user agent stylesheet.
Can you remove the dots?
Absolutely. To remove them unset the text-decoration property in your stylesheet:
abbr[title] {
text-decoration: unset;
}
Inclusive design approaches are also possible.
You can style any HTML element with any CSS you want, the problem is, for some HTML elements it will have no effect.
In other words, you can add the CSS to whatever the heck you want, but the browser may not support your changes.
i.e. Styling the <head> element is possible, but it is pointless.
I have made a div tabbable with the tabindex attribute to make hidden content accessible.
Currently when clicked with the mouse the div gets browser :focus styling.
Is there a way to have that tabbable element to only have focus styling when accessed via the keyboard? An anchor element has this by default.
Div with tabindex='0' gets browser focus styles on mouse and keyboard
interaction
Anchor gets browser focus styles on keyboard interaction
only
I would like the div to emulate the anchor. Making it an anchor is not an option though unfortunately.
Any help would be great, I'm genuinely at a loss.
Edit -> Here is an example: http://jsfiddle.net/LvXyL/2/
Sure just add the :focus pseudo-class to the div, and style. I recommend using outline vs border. I updated the fiddle.
div:focus {outline: blue solid 2px;}
Kub suggested a JS solution, but why use js if you don't actually need to?
I've had great success using javascript to add/remove a class to the body that indicates if the user is using a mouse or a keyboard. Use those classes to style your focus states as you desire.
document.addEventListener("mousedown", () => {
document.body.classList.add("using-mouse")
document.body.classList.remove("using-keyboard")
})
document.addEventListener("keydown", () => {
document.body.classList.add("using-keyboard")
document.body.classList.remove("using-mouse")
})
The in the css you can do something like:
.using-mouse :focus {
outline: none;
}
.using-keyboard :focus {
outline: auto 5px blue;
}
I would suggest to don't be specific on tags like div, p, span
let's write one common selector to achieve this functionality for all the elements.
*:focus {
outline: blue solid 2px;
}
If you want to be specific then I would suggest this one.
*[tabindex]:focus {
outline: 2px green solid;
}
I have used the focus-visible css selector to apply different styles for keyboard focus and mouse click.
The way I implemented it is like this:
.your-element's-classname:focus:not(:focus-visible) { outline: none; }
When you focus it with the keyboard you will see the browser's focus styling or the custom styling you have made for your element, and when you click it you will see no styling because I have applied outline:none which removes the outline created by the browser's focus styling.
You can find more information in Mozilla's focus-visible docs and Chromium's browser focus article.
For those who are looking to override the tabindex focus style and preserve the original functionality of tabindex ie. show outline only when tab key is pressed and not on mouse click like if
:focus {
outline: 2px solid lime;
}
is used it will show outline on every element that is getting focus, but I found out that if I use
Change Tabindex Style - for all elements:
:focus-visible {
outline: 2px solid lime;
}
this will override the outline style of the tabindex on focus and preserve the tab outline functionality but with the new outline style.
https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible
If you can use javascript, try use onclick attribute.
onclick="this.blur()" for lost focus
onclick="this.focus()" for set focus
Example where DIV on click lost focus and A is set focus http://jsfiddle.net/LvXyL/6/
Disadvantage is visible focus style if you hold mouse key for a longer time.
I am familiar with using css and the 'hover' feature but I am interested in knowing how to use an on click feature.
So to begin with to use the hover feature you can have:
#test {
background: black;
height: 100px;
width: 100px;
}
and then when the mouse 'hovers' over I want it to turn white
#test:hover {
background: white;
height: 100px;
width: 100px;
}
So is the a similar way of changing the background on click?
Thanks!
James
The psuedo selector element:focus is used generally for when an element has focus. Like when you are typing inside a textarea or input.
As you can see in this demo, button:focus doesn't make the background-color any different onClick.
To make it change while being clicked, use the element:active pseudo selector:
button:active
{
background-color: #f00;
}
Working demo here.
So is the a similar way of changing the background on click?
You can use javascript for this.
Simpliest thing is to use some jquery
$('#test').click(function(){
css('background','green');
});
You can also change the class of an item once clicked. This way you can store the css in your styelsheet.
$('#test').click(function(){
$(this).addClass('greenBackground');
});
Your description is slightly vague but current CSS specs only provide the following related pseudo-classes:
:active - Applies briefly while the element is being clicked
:focus - Applies while the element is focused (mouse or not)