When touching input checkboxes, on tablet or mobile, the response is slow, and not instant. Is there anything that can be done to increase the speed of the response time? I'm styling my radio buttons in the style of IOS like below.
<div class="iradio simulation-method">
<input name="simulation-method" id="upload-photos" value="0" checked="checked" type="radio">
<label for="upload-photos" class="simulation-method-label-js"><svg class="icon icon_camera"><use xlink:href="#icon_camera"/></svg>Photos</label>
<input name="simulation-method" id="scan-ipad" value="1" type="radio">
<label for="scan-ipad" class="simulation-method-label-js"><svg class="icon icon_ipad"><use xlink:href="#icon_ipad"/></svg>Scan</label>
</div>
a bit like this example:
https://codepen.io/wesruv/pen/vexkd
This is the normal behavior, because Safari is waiting a bit to know if the user wants to tap the radio button, or wants to double-tap on the zone where the radio button is (zooming).
This behavior can be disabled using CSS: touch-action: manipulation;
You can apply this to inputs, labels... or to the html tag so there won't be any delay on taps, even on links.
Related
I want to have a group of radio buttons, so that one of them appears twice.
The result would look like this:
The tricky point is that I want to achieve this in pure HTML/CSS (although I doubt CSS will help here).
Here is the code I wrote to produce the four radio buttons above:
<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button1">Choice 1</label>
<input type="radio" name="buttons" value="choice1" id="button1"/>
<label for="button">Choice 1</label>
<input type="radio" name="buttons" value="choice2" id="button3"/>
<label for="button3">Choice 2</label>
<input type="radio" name="buttons" value="choice3" id="button4"/>
<label for="button4">Choice 3</label>
I naively thought that attributing the same value to the first to buttons would make them behave as one, but of course it doesn't.
Is it possible to achieve this behaviour without any JS?
Edit
This might sound strange, so here's my usecase.
What I ultimately want is to have a radio button storing a global state, and have access to it at multiple places.
For instance, suppose the following snippet:
.state-repeater {
visibility: hidden;
}
#button.state-repeater:checked > p {
color: blue;
}
<input type="radio" id="button" />
<label for="button">Button</label>
<!--
Lots of blocks; the two parts are totally uncorrelated;
so the classical sibling selector tricks do not work
-->
<input class="state-repeater" type=radio id="button" />
<p>The button is checked</p>
I want the <p> tag text to turn blue when the radio button is checked; however, due to the radio button being far from it, I need some kind of repeater.
Obviously, the approach of this snippet does not work.
Is it possible to "repeat" the information that the radio button is checked?
You'll need to use JS. There is no pure way. Maybe wrap the radio in an element that LOOKS like 2 radio buttons and when clicked they both LOOK like they've been selected. But if you need two actual radio buttons that work together, you are out of luck. And in any case the thing I described before would be a huge headache compared to using JS.
I encountered a problem, where one radio button group is dependant on other state, which caused a disabled radio button to be selected. This is not a problem when selecting another value in the radio button group with the mouse for example, but it seems it is impossible to tab to the radio button group now. I realise that I maybe should not let this happen, but I think it is strange that you can build radio button group that you cannot change by keyboard alone. Here is a simple example:
<input type="radio" disabled checked name="test" value="1">
<input type="radio" name="test" value="2">
<input type="radio" name="test" value="3">
<input type="radio" name="test" value="4">
Is there something I can do to "fix" this behaviour, or does anyone have a good way to handle these edge cases, or how to code if differently all together to avoid this issue?
This is clearly a browser issue, although i'm not sure what would be the expected bahaviour.
The problem is that when you have a radio group, the keyboard goes to the selected element. If this element is disabled, then the focus will jump the whole radio group even if the other one are not disabled.
One "fix" would be to avoid the problem by dissociating the radio buttons in two groups and relying on some javascript code to let them appear as a whole group. You can also reimplement the whole radio button feature by using aria role="radio" on 4 div elements.
It's also possible to ask and wait for the bug to be fixed.
I have two inputs of type radio. For each input there's a correspoding label with a single button inside.
I was expecting that clicking the button would have the same effect as clicking the label: that the corresponding input would be checked.
However, this does not happen. As shown by the following snippet, hovering and pressing the buttons does trigger the corresponding style changes in the radio buttons, but the click action does not select the input, even though the simple labels work as expected.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
I have also tried to add an event listener to both buttons' click events, and within them calling event.preventDefault(), just to make sure that the default behaviour of the button was not preventing the event from bubbling up to the label, but to no avail, the label is receiving the event.
Since this seems to be consistent across browsers (Tested on Firefox 41a and Opera 31b / Chrome 44):
What's happening here that I'm missing?
How can I implement this without trickery (such as styling the label as if it were a button)?
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<button type="button">One</button>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<button type="button">Two</button>
</label>
</div>
A label can only be associated with one form control at a time. This is evidenced by the fact that the for attribute points to an element with a matching ID attribute.
You have a button that is a descendant of your label; the expected interpretation of this is that the label serves as a label for the button. However, you're trying to associate the radio button, not the button element, with the label. The real problem here is that there is a conflict between the form controls and the label; it's unable to figure out which control it's supposed to be associated to.
I'm guessing that the fact the radio button isn't working correctly is a side effect of this. Perhaps it's down to some activation behavior in both the radio button and the button element.
I've checked that buttons are legal children of labels. Labels allow Phrasing Content, and buttons are Phrasing Content, so everything should be okay there.
The validator does nevertheless produce the following error with your markup:
Error: Any button descendant of a label element with a for attribute must have an ID value that matches that for attribute.
This is because a label element with a for attribute needs to have a form control with that ID value for the for attribute to point to, even if that control is a descendant of the label itself. But you can't assign the same ID to more than one element. The result is the aforementioned conflict.
Without knowing what you're trying to accomplish here, the best advice I can give if you just want the label to have the appearance of a button is to just style it as such.
<div>
<input type="radio" name="A" id="one" />
<label for="one">One</label>
<label for="one">
<span style="color: red;">One</span>
</label>
<input type="radio" name="A" id="two" />
<label for="two">Two</label>
<label for="two">
<span style="color: blue;">Two</span>
</label>
</div>
I have made an html wizzard for making order. There are four steps, in each is bunch of radio buttons. I redesigned each radio button label to large button (and hidding the radio input itself). This all work greatly on classic PC. But I've run into problem with mobile device (iPHONE & iPAD, I can't test it on other devices, because I don't have any), which are unable to select the radio button.
I've found only one notice of this problem here on stackoverflow, but the solution published there isn't function either.
The original inspiration comes from apple online store for selecting differnt color of device.
My example code:
<label class="option" for="edit-term-worker">
<input id="edit-term-worker" class="form-radio" type="radio">
<span class="worker-name">Sandra</span>
</label>
It's there need some JS, or I'have some flaw in my code?
Thank you all for your help.
Have you tried this?
<input id="edit-term-worker" class="form-radio" type="radio" />
<label class="option" for="edit-term-worker" onclick="">
<span class="worker-name">Sandra</span>
</label>
EDIT: Added an empty onclick, according to this that should do the trick: HTML <label> command doesn't work in Iphone browser
Note that you shouldn't put the radio button into the label tag, it should be outside.
I have style my radio buttons with a background image, basically what i have done is
<input type="radio" id="btn" name="btn" style="opacity: 0;filter: alpha(opacity = 0);position:absolute;">
<label for="btn">My Text</label> <!--- added styles to it --->
with this i get output something like this
Image1 that shows how the display should be: http://i39.tinypic.com/2vcyidg.png
It works fine in every browser except ie8, in ie8 it shows a dotted box around hidden buttons when a label is selected
Image2 shows the problems in ie8: http://i39.tinypic.com/j8l635.png
I cant choose the property display:none; as in IE browsers it disables the radio buttons so i have to hide it.
How can i hide that dotted box in ie8?
Thank You.
Regards,
Shishant Todi.
Is there a reason why you're not using <input type="hidden" />?
if you can use javascript:
<input onfocus="this.blur()" type="radio" id="btn" name="btn" style="opacity: 0;filter: alpha(opacity = 0);position:absolute;" />
I had a similar issue where my radio buttons and checkboxes were showing borders, but only in IE. In my case, this was a css issue where these inputs were being treated the same as text inputs. I simply defined a new class in the stylesheet and specified a border of zero px.