CSS focus psuedo class, only on keyboard (tabbed) focus - html

It's a basic question really, but I can't find an answer. My CSS looks like this;
a:focus, button:focus{outline:3px solid #000;}
What I want is for the focus to only apply when the user tabs to those elements using the keyboard.
This is exactly how it works in Chrome, but in FF and IE the outline shows when the user clicks on the elements. Which isn't what I want.
Is Chrome in fact wrong? I'm trying to keep it simple and avoid Javascript is possible. How can I get the outline to show only when the user tabs around the page?
Browsers are IE8+, FF and Chrome only.
Thanks for any help!

Ok I know I said no JS if possible, but I don't wanna to spend any more time on this ... so for anyone interested this is what I did
$("a, button, select, input[type=submit], input[type=text]").keyup(function(){
$(this).addClass("focusOutline");
}).blur(function(){
$(this).removeClass("focusOutline");
});
Which does the job just fine. HTH someone sometime

Use :focus-visible. It's currently a W3C proposal for styling keyboard-only focus using CSS. Until major browsers support it, you can use this robust polyfill.
/* Remove outline for non-keyboard :focus */
*:focus:not(.focus-visible) {
outline: none;
}
/* Optional: Customize .focus-visible */
.focus-visible {
outline-color: lightgreen;
}
I also wrote a more detailed post just in case you need more info.

I did this a different way elsewhere, and thought I'd add it in here as an alternative solution for anyone who stumbles across it:
/**
* If user hits tab key then we add a class to <html> that lets us use
* additional styling hints to show focus etc.
*/
function detectTabKey() {
$(document).keydown(function(e) {
if (e.keyCode === 9) {
$('html').addClass('is-tab-user');
}
});
}

Related

Strange outline appears in Chrome 83/IE on my Windows 10

something very, very strange has happened.
Since a few hours, my Chrome (also IE) shows a different default outline on input.
Inspecting the code I saw that the outline set is as follows:
outline: -webkit-focus-ring-color auto 1px
and result is like this:
happens both incognito and in navigation with or without extensions.
how can I restore it ?
I think you can achieve it with something like this
*:focus {
outline: 1px solid aliceblue
}
so you can define for all of your elements which outline to render on focus.
a similar question can be found here
Chrome default focus outline
ps: although I think the new chrome outline is ugly as hell, don't forget that disabling it at all is a bad practice
http://www.outlinenone.com/
cheers
it's a new "feature" of chrome 83....(that afflict all S.O.) I hope will be removed soon.
https://support.google.com/chrome/thread/48974735?hl=en
The teams at Microsoft Edge and Google Chrome spent the last year
collaborating to retheme and improve the functionality of the built-in
form controls on Chromium browsers. ... The new focus indicator uses a
thick dark ring with a thin white outline, which should improve
visibility on both light and dark backgrounds. This is an easy
accessibility win that automatically improves the keyboarding
experience on a number of sites without developers needing to write
any new code. What's New in Chrome 83
You could easily totally remove or customize the focus outline for all or any element that you want like below:
*:focus {
outline: none; /* or customize it */
}
*:focus {
outline: none !important; /* or customize it */
}
You have to add "!important".

Checkbox: remove the square on focus

How can I remove the small square arround the radio button that gets displayed when the input gets focused?
I'm pretty sure this is a duplicate, but I don't know what the square is actually called and couldn't find what I'm looking for.
I tried autocomplete="off" on the input. I played arround with jQuery's preventDefault but without success.
Update:
Thanks for your responses. If anyone comes accross this question, here is the effect of appearance attached (upper pic without appearance, the one below is with appearance) with Firefox:
Just in case someone comes to the same problem.
Update with Chrome / Safari, appearance removes the input
-webkit-appearance: none; would make the radio buttons disappear in
Chrome and Safari. check jsfiddle.net/8uY6H (with Chrome)
– noted by JFK 6
Try this CSS since it is an outline:
input[type="radio"]:focus {
outline:none;
}
Try outline:0 property for the radio button on focus
input[type="radio"]:focus{
outline:0;
}
You need to set:
outline:none;
On the :focus state of the CSS class relating to the checkbox, or directly e.g.
input[type="radio"]:focus{
outline:none;
}
The crucial part is setting outline
The CSS outline property is a shorthand property for setting one or
more of the individual outline properties outline-style, outline-width
and outline-color in a single rule. In most cases the use of this
shortcut is preferable and more convenient.
However, also setting appearance may help cross platform where different browsers render checkbox elements differently.
As noted in the comments below though, this will cause the checkbox to not display in some circumstances- so you would need to produce a pure CSS solution.
The -moz-appearance CSS property is used in Gecko (Firefox) to display
an element using a platform-native styling based on the operating
system's theme.
This property is frequently used in XUL stylesheets to design custom
widgets with platform-appropriate styling. It is also used in the XBL
implementations of the widgets that ship with the Mozilla platform.
As simple as
input[type="radio"] {
outline: 0 none;
}
JSFIDDLE

How to remove arrow on selectbox (Firefox)

I have styled my select boxes, but i can still see the arrow in my select box in firefox, i have set css so:
background:transparent;
content:'';
apperiance:none;
Thats work on Chrome, but on Firefox i still see default arrow, is possible to delete it also on Firefox?
This should remove the arrow in selects in Chrome, Firefox, Safari, and IE10.
.poa-select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
text-indent: .01px;
text-overflow: "";
}
.poa-select::-ms-expand {
display: none;
}
Ideas taken from here and here.
Unfortunately there isn't yet a cross-browser compatible route of styling form elements with CSS: it's not usually left to the designer to have control over their appearance/behaviour so form elements are notoriously difficult to style. Many browsers specifically do not allow you to style them at all!
If you need to get a consistent look across all browsers, the only route is to use JavaScript to replace the form element in-view with stylised HTML elements.
Here's an article that lists a few of the options available for you: http://www.jquery4u.com/plugins/10-jquery-selectboxdrop-down-plugins/
The trick that works for me is to make select width more than 100% and apply overflow:hidden
select {
overflow:hidden;
width: 120%;
}
The answer from here : How to remove the arrow from a tag in Firefox
Use the pointer-events property.
The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it. [see this post]
Here is a working FIDDLE using this method.
Also, in this SO answer I discussed this and another method in greater detail.

How to remove button outline in Opera on focus

Does anybody know how to remove the dotted outline on buttons in Opera?
I have done it.
Here you go: http://jsbin.com/oniva4. [tested on Opera 10.5/11]
The secret is using outline-offset:-2px; (effectively covering the dots) and the background's color for the outline. outline-offset is supported since version 9.5.
The introduction of the article Do not lose your focus
For many web designers, accessibility conjures up images of blind users with screenreaders, and the difficulties in making sites accessible to this particular audience. Of course, accessibility covers a wide range of situations that go beyond the extreme example of screenreader users. And while it’s true that making a complex site accessible can often be a daunting prospect, there are also many small things that don’t take anything more than a bit of judicious planning, are very easy to test (without having to buy expensive assistive technology), and can make all the difference to certain user groups.
In this short article we’ll focus on keyboard accessibility and how careless use of CSS can potentially make your sites completely unusable.
And the list of test given by the article on outline management.
Update 2011-02-08
I can confirm that it is not possible for now. There is an open bug for it.
I say this with the clear proviso that you shouldn't remove the outline unless you replace it with something else that indicates focus state ...
If you apply a transform to the element, it kills the outline in opera; it doesn't even need to do a visible transform, merely applying the property is enough. So this will do the job:
#myButton:focus
{
-o-transform:rotate(0);
}
But I can't promise that wouldn't be considered a rendering bug, and consequently something that may change in the future.
I believe the problem lies in where you specify the outline properties. Try this:
*:focus, *:active {
outline: none; (or possibly outline: 0)
}
I researched this more and it looks like on input fields and buttons it will not work unless you edit the browser's config, like Firefox's about:config page. It seems to be done for accessibility reasons so that a keyboard can be used to fill out and send a form without using a mouse.
I used that trick above for my text area and worked fine! Using a Text Area with an id "itens", here it goes!
#itens:focus, #itens:active{
outline: 1px solid white;
outline-offset: -2px;
}
So, you can play with that:
#itens:focus, #itens:active{
outline: 1px solid lime;
outline-offset: -2px;
}
Are you looking for:
button{
outline:none;
}
or if your button is an input...
input[type=button]{
outline:none;
}
Just read this forum post on the opera website
http://my-beta.opera.com/community/forums/topic.dml?id=712402
There seems to be no fix for it
Further to my tip above -- with experience I've found that it doesn't always work, and isn't always appropriate anyway, since it can change the way the element is rendered in subtle and sometimes unpleasant ways.
So, if that doesn't work, another thing you can do which often does, is to specify the outline color as "rgba(0,0,0,0)"
if you attached css-reset in your stylesheet should solve the issue.
Remove outline for anchor tag
a {outline : none;}
Remove outline from image link
a img {outline : none;}
Remove border from image link
img {border : 0;}
This is less of an answer, and more of an explanation as to what seems to be going on:
The story
My reason for removing opera's outline was to add an outline of my own. To add an outline I used:
:focus{
outline:1px dotted #999;
outline-offset:-3px;
}
This works perfectly fine in every other browser... except Opera. Opera instead gives you this weird interference pattern, which looks like a dotted-dashed outline:
now if you remove your outline, you still have the standard outline that Opera provides, a nice simple 1px spaced dotted line:
Since I have no way of adding a style to every browser except Opera, I instead decided on removing Opera's outline before adding my own. Using brothercake's solution, -o-transform:rotate(0); to do this and then applying my own outline:
Voila!
An Explanation?
From what I can tell, Opera adds it's own secondary outline on top of any outline defined by CSS.
This secondary outline seems to have an independent color, width, style, and offset.
Color is the opposite of the background,
Width is 1px,
Style is dotted,
and the offset is 2px smaller than the border.
sorry there is no style image, the upload didn't work correctly
one interesting thing is that the dotted style of the Opera outline is not the same as the CSS outline's dotted, otherwise there would be no interference pattern with both:
Conclusion:
As I stated above, I am using brothercake's solution which is to nullify the opera border with:
-o-transform:rotate(0);
As he mentioned in his later comment this 'fix' does have some issues as it is a rendering bug:
I have noticed that when returning window or tab focus to the page containing the button, if the button previously had focus, the Opera outline will reappears until the button loses focus or is hovered over.
better:
outline: solid 0;
for all web browsers

How to change color of disabled html controls in IE8 using css

I'm trying to change the color of input controls when they are disabled using the following css.
input[disabled='disabled']{
color: #666;
}
This works in most browsers, but not IE. I'm able to change any of the other style properties such as background-color, border-color, etc... just not color. Can anyone explain this?
Unfortunately if you use the disabled attribute, no matter what you try IE will just default the color of the text to Grey, with a weird white shadow...thing... yet all other styles will still work. :-/
I had the same problem for <select> elements in IE10 and found a solution that works for select elements only:
http://jsbin.com/ujapog/7/
There is a Microsoft pseudo-element that allows the text color to be modified:
select[disabled='disabled']::-ms-value {
color: #000;
}
The rule must be on it's own, because otherwise other browsers will ignore the whole rule due to syntax error. See http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx for other Internet Explorer only pseudo elements.
Edit: I think the rule should probably be select[disabled]::-ms-value but I don't have older IE versions in front of me to try it - re-edit this paragraph or add comment if that is an improvement.
There is no way to override styles for disable="disable" attribute. Here is my work around to fix this problem, note I am only selecting submit buttons in my case:
if ($.browser.msie) {
$("input[type='submit'][disabled='disabled']").each(function() {
$(this).removeAttr("disabled");
$(this).attr("onclick", "javascript:return false;");
});
}
example available: http://jsfiddle.net/0dr3jyLp/
I had the same problem with textarea "disabled" changing font color to gray.
I did a workaround by using "readonly" attribute instead of "disabled" attribute to textarea
with below css
textarea[readonly] {
border:none; //for optional look
background-color:#000000; //Desired Background color
color:#ffffff;// Desired text color
}
It worked for me like a charm!!, so I suggest to try this first before any other solution as it is easy to replace "disabled" with "readonly" without changing any other parts of code.
I Know it's been a while since the creation of this topic, but i created this workaround, and well... It worked for me! ( Using IE 9 )
The only consequence is that you can't select the value of the input.
Using Javascript:
if (input.addEventListener)
input.addEventListener('focus', function(){input.blur()}, true)
if (input.attachEvent)
input.attachEvent("onfocus", function(){input.blur()})
I just made the whole background a light gray color, I think it more easily/quickly convey's that the box is disabled.
input[disabled]{
background: #D4D4D4;
}
The way I solved the problem of "disabling" a control in IE w/o the ugly gray with a input control of type = checkbox was to leave it enabled and use a little javascript in the onclick event to prevent changes:
onclick='this.checked == true ? this.checked = false : this.checked = true;'
As mentioned by Wayne, and three years later still no luck w/ IE9, but...
You could try lowering the opacity using CSS, it makes it more readable and helps with the whole disabled state.
It is the solution that I found for this problem:
//if IE
inputElement.writeAttribute("unselectable", "on");
//Other browsers
inputElement.writeAttribute("disabled", "disabled");
By using this trick, you can add style sheet to your input element that works in IE and other browsers on your not-editable input box.
I mixed user1733926's and Hamid's solutions and I found an effective code for IE8, would be nice to know if it works in ie 9/10 as well (?).
<script type="text/javascript">
if ($.browser.msie) {
$("*[disabled='disabled']").each(function() {
$(this).removeAttr("disabled");
$(this).attr("unselectable", "on");
});
}
</script>
After reading this post I decided to create a input that acts similarly to a disabled input box but was "readonly".
So I've made it so it wasn't able to be selected or tabbed to, or have a mouse cursor that gave the user the idea they can change or select the value.
Tested on IE8/9, Mozzila 18, Chrome 29
<input name="UserName" class="accountInputDisabled" id="UserName" type="text" readOnly="readonly" value="" unselectable="on" tabindex="-1" onselectstart="return false;" ondragstart="return false;" onmousedown='return false;'/>
input.accountInputDisabled {
border: 1px solid #BABABA !important;
background-color: #E5E5E5 !important;
color: #000000;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-moz-user-input: disabled;
-ms-user-select: none;
cursor:not-allowed;
}
input:focus {
outline: none;
}
No need to overrride CSS use class based approach and play with events works perfectly
You can do one thing:
<button class="disabled" onmousedown="return checkDisable();">
function checkDisable() {
if ($(this).hasClass('disabled')) { return false; }
}
http://navneetnagpal.wordpress.com/2013/09/26/ie-button-text-shadow-issue-in-case-of-disabled/
Remove disabled attribute and use readonly attribute. Write required CSS for achieving the required result. This works in IE8 and IE9.
for e.g., for dark grey,
input[readonly]{
color: #333333;
}
Please check this CSS code.
input[type='button']:disabled, button:disabled
{
color:#933;
text-decoration:underline;
}
or check this URL.
http://jsfiddle.net/kheema/uK8cL/13/
The problem is solved in IE11.
If the problem still persists in IE11, check for the rendering engine IE is using.
I came across this piece of code at stackoverflow which helped me take off disable css class using javascript.
$("#textboxtest").prop("disabled", false).removeClass("k-state-disabled");
Original thread can be found at Applying k-state-disabled class to text inputs - Kendo UI
Thought I should share!
Use this css, works for IE11:
input[disabled="disabled"], select[disabled="disabled"], textarea[disabled="disabled"] {
opacity:0.99 !important;
background:black;
text-shadow:inherit;
background-color:white;
color:black
}