It seems Chrome doesn't register tabindex on radio button by default.
If you click on one of the radio button then push tab, chrome will focus the first link in the page.
If you click on another type of input element, he will continue in the form, as expected.
If you put tabindex everywhere, the form will mostly work as expected, except if you select (click on) a radio button, then tabbing will select the first form element.
How could I reproduce the same experience as in IE/FF?
I ran across this issue too. I figured out that if you gave each radio button it's own ~ name=unique ~ name=unique2 ~ name=unique3 that the tabindex would work.
Check out this website:
Form Trick: Set the Tabbing Order
You can see how he has different name values for all the radio buttons.
Hope that helped,
Diana
Related
I am styling some radio buttons to make it look unique. But i got problem, the problem is when i give it position, it does give me look which i want, but i am unable to click on the radio button labels to act them as radio button. Here is my codepen and code that is making my input radio button non clickable. I am unable to choose either as my radio button is off screen. It seem like i cannot select anyone of them.
input[type="radio"]{
position:absolute;
left:-9999;
}
Your codepen example has a typo: label for="male" is also used for the female case.
Once that is fixed I can click anywhere on those labels.
I'm working to make a page accessibility compliant. I have a few form elements that I can only reach once I click on an element in that form. If I load the page and hit tab, it cycles between a few links at the top of the page. If I click on one of the form elements, it gets focus, then I can tab to the other form elements. If I tab out of the form, I can't return with out clicking. Any idea what's going on here?
I would try to attach the attribute tabindex to the form inputs.
<input type="text" tabindex="3"></input>
http://www.w3schools.com/tags/att_global_tabindex.asp
I wanted to add a behavior for input with placeholder to a contenteditable field.
Not a problem and it is done with the following CSS
<div contentEditable="true" data-placeholder="Title"></div>
[contentEditable=true]:empty:not(:focus):before{
content:attr(data-placeholder);
color:grey;
}
which is for every element with an attribute contenteditable that is true and also does not have children and not focused insert a text that is equal to the text in data-placholder.
JsFiddle is available. On FF, Chrome and IE 11 it works nice, but in Safari (from 5 to 7) I see the following bug. When I click:
click on editable
write something
click away (it works properly)
then go back to contenteditable
remove all the text
click away
Than my contenteditable is empty. (In all other browser it has Title inside). Note that if you just click on editable and clickaway, it behaves correctly.
No idea why it behaves this way and also how to fix it.
This is a known issue where the element does not register as being empty. You can fix it with a simple jquery function call to empty the element:
$input.empty();
See this answer for a detailed explaination.
Here your working jsfiddle.
How does the css3 :checked work with hidden element?
I found the custom checkboxes and radio butons here is a demo.
Where firstly set hidden to the radio button:
input[type=radio]{display: none;}
And applied :before pseudo element for the label to make appear like radio button before the label.
But now after user checks the button then the following css is applied to display the check.
input[type=radio]:checked + label:before{
So, now my question is that how the radio button is checkable and uncheckable by the user where the example uses display: none to the radio button and for that nothing pseudo element is created but only for label before, and it uses
input[type=radio]:checked to display custom button.
But how is the radio button is accessible to check or uncheck which is hidden?
There's two key points here:
A checkbox has a checked status regardless of if it is shown. Just because it is style='display: none' doesn't mean it's not checked or unchecked.
A label for a checkbox (Has the for attribute set to it's id or the input is defined in it), when clicked, will change the status of the checkbox, even if that checkbox isn't visible.
So based on that, what you have is a label for each checkbox shown, then a CSS rule that applies to label elements that occur directly after an input which is :checked that define a pseudo-element before it. By clicking the label you toggle the invisible checkbox and you get this result.
When you render:
<input type="file" />
you get a box and a button, right? (At least in Firefox and IE.)
in IE how you can tab to (focus) both the box and the button or only button.
The text box and button act as the one element in the browsers so you can only set the tab index to the thing as a whole, not each element. To focus the file input use: $('input[type=file]').focus();
You get a box and a button, right?
Nope. Google Chrome on Ubuntu, for example, doesn't have a textbox. You shouldn't expect every browser on every OS to have the same ugly form widgets as IE.