When I add a label the a form input, I can normally click the label and it will refer me to the appropriate input (see below).
<label for="input">Label</label><input type="text" id="input"/>
However, when I try to accomplish the same with a file input, the click on the label gets ignored. Is this a bug? A "feature"? And is there any way to still accomplish this?
jsFiddle testcase: here
The label's prescribed behavior differs between HTML specifications.
More precisely, this is probably a bug in FF (rather than an extra feature in the others), because this behavior should usually be included according to the HTML 4 spec:
When a LABEL element receives focus, it passes the focus on to its associated control. See the section below on access keys for examples.
The current HTML spec is more nuanced, but does indicate the possibility that it do nothing (this is the expected behavior in iOS).
Related
I'm using some type="time" inputs to gather local times in a web app. It's important that the user can see which inputs they've included, and which inputs are not yet entered. In desktop Safari, I notice that webkit seems to automatically insert 12:30 PM as a default time. I want to have the user see clearly that there's currently no time in that field. I want to either find a way to not have ANY input appear when the user hasn't included a time themselves, or if that doesn't work, find a way to specifically target the fields that don't have input so I can change the styling to be clearly different (i.e. have transparent coloring).
My desired behavior is to have the empty input appear empty, as if hour/minute/meridian placeholder text was clear.
I can verify using the fiddle below that times appear correctly empty in all browsers I've tried other than desktop Safari. I have other code to adjust widths, but the fiddle's CSS is copied from the properties of one input for simplicity's sake.
Link to minimal recreation of the problem with current styling here: https://jsfiddle.net/1g92ek3z/1/.
This answer is related but trying to target the datepicker: How to customize html5 datepicker.
I've uncovered browser pseudo selectors that can be used to target the browser default elements in the time input:
::-webkit-datetime-edit,
::-webkit-datetime-edit-wrapper,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-meridiem-field
Beware - if you set display: none or visibility: hidden on these corresponding elements it also breaks the input functionality.
So my solution ended up changing the input color based on whether the field has a value and/or focus; something like:
input[type="time"]:not(.has-value):not(.focus-visible) {
color: #EFEFF0;
}
...where has-value is a conditional class when the input has a value and focus-visible is a conditional class when the input has focus.
I am using a plugin to do client side form validation. The issue is that the plugin adds a label that contains the form information, so the invalid form control now has two labels. I have modified the plugin so that the labels toggle depending on the validity; however, I'm concerned about accessibility and valid HTML (although less concerned with the validation of HTML).
So, is this OK?
<label aria-hidden=true style="display:none" for="inputElement">My Input Element</label>
<label for="inputElement">My Input Element must be at least 10 characters</label>
<input id="inputElement">
I see in the specs that each label can only point to one input element, but it doesn't say if one input element can only have one label.
Thanks.
It is inaccessible to have multiple labels for a single input. It is confusing to people that use screen readers. With that said, anything with display:none; will not be seen with screen readers. If you're just toggling based on if the input is valid, use a div instead.
An answer to this question explains that is technically correct, but the second answer explains why you should not do it.
I am looking to disable a few html controls and I am running into cross browser issues with the differences between IE and Firefox/Webkit browsers. The primary issue is evident with the following line:
<input type="text" name="badIE" disabled="disabled" style="color:blue;" value="IE won't show this correctly" />
In IE, the above input would have grey text, while the text is blue in every other browser I have tested. It would appear that IE allows the disabled field of a text input to take precedence over the CSS rules for the text color. Is there any established best practice or IE CSS hack to address this type of issue?
According to the upvoted (but not accepted) answer here, you're kind of stuck with using 'readonly'.
Just out of curiousity - why are you displaying text in a textarea that you don't even want your users to be able to focus on? Seems to me you'd be better off displaying that in a regular text HTML element (e.g. <p>).
It turns out that there are few different ways to attack this problem but there isn't one exact answer. In order to provide the most complete answer possible, here is a list of the possible solutions.
Accept the differences between browsers and continue using the disabled field. This is probably the right answer. As chipcullen suggested on his comment, there is rarely a necessity that all browsers look identical. It is better to simply accept the differences between and work with them.
Use the readonly attribute instead of disabled. The problem with this method is that a user can still interact with a readonly control. For example, users could focus on the control or stick a blinking cursor in the middle of the text. If interaction is a major concern, you can always shield the disabled control behind an invisible element, although that method is on the hacky side.
The option I chose was to replace the input elements with a pure text element. Although this method might not be as straightforward as it might sound. My page was interactive and certain elements would be enabled/disabled depending on client side actions. In order to handle the transition, I threw together the following Javascript (after chipcullen's suggestion and with the help of jQuery):
function disabledToSpan() {
$('input[type=text]:disabled, textarea:disabled').replaceWith(function () {
return $('<span>' + $(this).val() + '</span>').attr('class',
$(this).attr('class')).addClass('disabledTextInput');
});
}
In summary, this will find all disabled text inputs and textareas, switch them to spans while preserving both their values and classes, before finally adding a disabledTextInput class to specially stylize the disabled elements.
I'm working on an HTML page where we would like the input fields and select dropboxes to have a border around it as it is tabbed through and in focus. I've defined an input class within my CSS like so:
input.highlight:focus {
border: #003366;
border-style: solid;
border-width: 2px;
}
The input field is defined within my HTML file like so:
<input class="highlight" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">
The focus seems to work fine in Chrome, but in IE the focus remains on one of my buttons no matter what I do. The button seems to steal the focus attribute and the page never focuses on any input fields, so the fields are never shown with a border around them while they are being tabbed through. What might be the cause of this problem?
From another thread, someone was able to point out that the :focus attribute is only recognized in IE9. This explains why the jsFiddle version works properly. When running the HTML file from my local drive, however, IE9 runs in compatibility mode for IE8 and lower and the :focus attribute is never recognized.
Have you tried to set the tab index attribute to the page elements. This property is supported by all major browsers. Supporting Browsers are : IE, safari,firefox,chrome.
" The button seems to steal the focus attribute and the page never focuses on any input fields, so the fields are never shown with a border around them while they are being tabbed through."
If i understand your question clearly then you have an issue while tabbing from one element to another right?. If that is the case the tab-index with increasing index value(or any order) will let you to select next elements while tabbing based on the tab-index set up, and the DOCTYPE Tag specifies the rules for the markup language, so that the browsers render the content correctly. Of course the changes in the Doctype tends to changes in the page. Have a quick look on w3 schools about doctype, Hope it may spot some light.
Cheers,
Arun
When I am hovering over an HTML label the mouse pointer changes to a hand image which we generally get when clicking a link. How can I avoid that?
The reason why you might get a hand cursor in some browsers, is because one of the main purposes of a label element in most browsers is to provide a clickable description for a form input element. For example, this is a typical use of the <label> element:
<input type="checkbox" name="TermAgreement" id="TermAgreement" />
<label for="TermAgreement">I agree to these terms</label>
In most browsers, this will result in the text "I agree to these terms" being clickable. When you click on the text, it will toggle the checkbox with an ID of TermAgreement, just as if you had clicked on the check box itself.
(Note: The W3C specification for <label> in HTML 5 doesn't require this behavior, but it does say that the browser's implementation of <label> "should match the platform's label behavior". In practice, this usually means <label> elements are clickable.)
So essentially, the cursor behaves as though the <label> is a link because it is a link, of a sort. If you're using it differently, you might want to consider using a different HTML element instead.
Whether or not a particular user sees a hand cursor when mousing over a label will vary depending on their OS and browser. Chrome and Firefox aren't displaying this behavior for me on Windows XP, but other platforms might. Also, it's possible that you have a CSS file included which specifically calls for this behavior. There would be a rule in your CSS that looks something like this:
label {
cursor: pointer;
}
If you want to override the element's default behavior, you can use cursor: default; in your CSS, as #rickyduck said. You can find information on the CSS cursor property here. Note that changing the cursor will not necessarily mean the element won't respond to being clicked.
If this doesn't solve your problem, please provide us with more information. Sample code, the URL of the page displaying the behavior, as well as which browser you're using would also be good to know.
<label style="cursor:default">Text<label>