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.
Related
Every one of my input fields has the little person icon with the arrow in safari. How to I disable that? By the way, I have any other similar page and that's not happening. I tried turning off all styles in the web inspector and the one page still has the icon.
If you want to hide it completely, you can use the following css tricks. Basically it detect that 'contacts-auto-fill-button' and move it away from your input field. Make sure you have 'absolute:position' to avoid extra padding from your fields.
input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}
You don't have to cancel all properties of the autofill buttons.
To hide Safari's icons altogether, you can also just hide its wrapper.
As the icons are Shadow Content, the DOM won't show it but the shadow DOM does. Just turn on the '<>'-button in the inspector.
There you'll find the wrapping container you can target with css like this:
input::-webkit-textfield-decoration-container {
display: none; /* or whatever styling you want */
}
Inside you will find the password keychain and the caps-lock indicator:
input::-webkit-caps-lock-indicator {
}
input::-webkit-credentials-auto-fill-button {
}
Oh, and while you're at it, don't forget IE with its clear buttons and password eye icons:
input::-ms-clear {
}
input::-ms-reveal {
}
Hide autofill Safari icon in input password field:
::-webkit-credentials-auto-fill-button {
visibility: hidden;
position: absolute;
right: 0;
}
Related: I wanted to adjust the position of the the key icon for a input[type="password"] but couldn't find the pseudo element selector anywhere.
So I cloned the webkit source and was able to find it :)
input::-webkit-credentials-auto-fill-button
As a note – check your field labels and any placeholder attribute values too – as these can also cause autocomplete popups to appear, despite CSS styling rules being applied to the contrary.
See below for more detail...
It should be noted that in Safari (version 11+ at least, and likely earlier versions too, and other recent browsers, e.g. Chrome, Firefox, etc), that even if the various CSS workarounds to hide the autocomplete popups are in place, if the field appears to be a username or password field to the browser, then the autocomplete field still appears.
I found that the browser is not only checking the <input> tag's name attribute for keywords such as username, login and similar variants, but also appears to consider the contents of any placeholder attribute text on the field, as well as most surprisingly, any text adjacent to the <input> field such as that used as a form field label. The label text does not need to be placed into a <label> tag to have this effect - just to be in close proximity to the field, although I haven't had opportunity to extensively test and determine what is considered 'close proximity' - this will require some further research and experimentation or where possible, review of the various web browser rendering engines' source code - such as for WebKit.
As such if you have keywords word such as username, user name, login or similar variants, as well as variants for password, the browser will show the autocomplete popup when the field is focussed, despite any CSS rules to try and hide it!
While I was not as surprised to see the popup being activated by the <input> tag's name or placeholder attribute values, I was surprised to see that label text was considered too by the browser, as such I had to change the wording and labelling of the fields to ensure the popups did not appear. I found for example modifying the placeholder text from 'Please enter your username...' to 'Please enter your user-name...' prevented the browser from recognizing the field as a username field – also notice the hyphen between the words user and name – without the hyphen between the words – the popup still appeared, so it shows how may edge cases the browsers are checking for. As a note, I had already modified the field's name attribute and the adjacent labelling by this stage to remove references to the triggering keywords or their variants.
It is clear that browsers are doing some interesting page inspection to determine if to show username/password popups - and while this is great overall behavior that helps encourage users to take advantage of password managers for more secure credential generation and storage, there are times when you don't want the autocomplete popup to appear. There are use-cases such as within an admin interface that allow administrators to manage staff user accounts for example - where you want to offer a field to search for a staff user by their username. In cases like this you don't want the autocomplete popup to try and fill the field with your own username, but rather allow you to enter any number of staff usernames for example. It would be great if one of the standard autocomplete='off' flags or a future variant could be adopted by the browser vendors to provide this clean control of the autocomplete behavior or a standard CSS attribute that if applied always had the intended effect... but alas this is not currently the case.
For now however, if you are dealing with this issue, make sure you are also considering the contents of any placeholder attribute you have added to any username or password <input> fields - as well as any label-like text that appears nearby. By adjusting and experimenting with the values of these labels/attributes you should be able to work around the page-inspection logic the browsers are using to enable these autocomplete popups.
As always with the web, and as some of browser's rendering engines are closed-source, this will likely continue to be more of an art than a science, until a standard is developed to provide control of this feature for all browsers on all platforms, and it may be necessary to occasionally revisit the code to check it against new browser versions to ensure that popups are not re-appearing due to changed page-inspection logic.
If you use <input> field without wrapping it in <form> tag, Safari 11+ or latest would show you auto-fill suggestion. So here is what you can do.
Option 1: Make sure <input> elements are wrapped inside <form> element. Don't set value of name attribute to "username" or "login".
Option 2: Add name attribute and set its value as "search". <input type="text" name="search">
Note: Using autocomplete="off" or autocomplete="false" on either <form> and <input> would not help.
Neither adding following CSS properties would work.
input::-webkit-autofill,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button
Even with visibility:hidden or/and display:none Safari Ios keeps popping up icons and buttons. For me, the best solution was to set opacity to 0. This doesn't remove unwanted icons, but makes them completely transparent, and thus invisible. Furthermore, it works on whatever background color or img you're using.
input::-webkit-contacts-auto-fill-button {
opacity: 0;
}
The answers are all correct, however most of them are just curing the symptoms. Mostly, you just need to check your name attribute. In case you didn't give any name, name your input something. This helped in my case as without a name safari makes mistakes in recognizing autofillable inputs
When all of my inputs are set to "text" it works beautifully.
Example:
https://jsfiddle.net/beckah/62oozn3t/
However when I have additional HTML5 input elements, such as tel or email, my label refuses to float after typing in the field and than making another field active. To test, type in the "email" input and then select another input and type. you'll see that the label doesn't continue to float once not active
Example: https://jsfiddle.net/beckah/8zpd5n46/1/
Any help would be very appreciated.
Thank you.
As pointed out in the comments, your issue is with the :valid selector on your css in this section of code, as well as a few other places.
input.question:focus,
input.question:valid {
padding-top: 35px;
}
Because you are using the :valid selector, and your email or telephone in some cases is not a valid, it collapses, whereas with your text inputs, as long as it is not empty, it will not collapse again.
If you don't want to go through all the hassle of writing JavaScript, you can make it a normal text input and it won't have the # and .com keys available on mobile, but it will work as designed.
To fix this fully, you should check the input via JavaScript, as there is no way in CSS to see if a textarea or input has text inside. You can do this by basically checking to see if the value of the input is not empty, and if it isn't, adjust the css style via javascript with getElementById().style.padding = "35px";
I'm sorry there is no simple solution, but CSS doesn't have anything for inputs like this yet.
Every one of my input fields has the little person icon with the arrow in safari. How to I disable that? By the way, I have any other similar page and that's not happening. I tried turning off all styles in the web inspector and the one page still has the icon.
If you want to hide it completely, you can use the following css tricks. Basically it detect that 'contacts-auto-fill-button' and move it away from your input field. Make sure you have 'absolute:position' to avoid extra padding from your fields.
input::-webkit-contacts-auto-fill-button {
visibility: hidden;
display: none !important;
pointer-events: none;
position: absolute;
right: 0;
}
You don't have to cancel all properties of the autofill buttons.
To hide Safari's icons altogether, you can also just hide its wrapper.
As the icons are Shadow Content, the DOM won't show it but the shadow DOM does. Just turn on the '<>'-button in the inspector.
There you'll find the wrapping container you can target with css like this:
input::-webkit-textfield-decoration-container {
display: none; /* or whatever styling you want */
}
Inside you will find the password keychain and the caps-lock indicator:
input::-webkit-caps-lock-indicator {
}
input::-webkit-credentials-auto-fill-button {
}
Oh, and while you're at it, don't forget IE with its clear buttons and password eye icons:
input::-ms-clear {
}
input::-ms-reveal {
}
Hide autofill Safari icon in input password field:
::-webkit-credentials-auto-fill-button {
visibility: hidden;
position: absolute;
right: 0;
}
Related: I wanted to adjust the position of the the key icon for a input[type="password"] but couldn't find the pseudo element selector anywhere.
So I cloned the webkit source and was able to find it :)
input::-webkit-credentials-auto-fill-button
As a note – check your field labels and any placeholder attribute values too – as these can also cause autocomplete popups to appear, despite CSS styling rules being applied to the contrary.
See below for more detail...
It should be noted that in Safari (version 11+ at least, and likely earlier versions too, and other recent browsers, e.g. Chrome, Firefox, etc), that even if the various CSS workarounds to hide the autocomplete popups are in place, if the field appears to be a username or password field to the browser, then the autocomplete field still appears.
I found that the browser is not only checking the <input> tag's name attribute for keywords such as username, login and similar variants, but also appears to consider the contents of any placeholder attribute text on the field, as well as most surprisingly, any text adjacent to the <input> field such as that used as a form field label. The label text does not need to be placed into a <label> tag to have this effect - just to be in close proximity to the field, although I haven't had opportunity to extensively test and determine what is considered 'close proximity' - this will require some further research and experimentation or where possible, review of the various web browser rendering engines' source code - such as for WebKit.
As such if you have keywords word such as username, user name, login or similar variants, as well as variants for password, the browser will show the autocomplete popup when the field is focussed, despite any CSS rules to try and hide it!
While I was not as surprised to see the popup being activated by the <input> tag's name or placeholder attribute values, I was surprised to see that label text was considered too by the browser, as such I had to change the wording and labelling of the fields to ensure the popups did not appear. I found for example modifying the placeholder text from 'Please enter your username...' to 'Please enter your user-name...' prevented the browser from recognizing the field as a username field – also notice the hyphen between the words user and name – without the hyphen between the words – the popup still appeared, so it shows how may edge cases the browsers are checking for. As a note, I had already modified the field's name attribute and the adjacent labelling by this stage to remove references to the triggering keywords or their variants.
It is clear that browsers are doing some interesting page inspection to determine if to show username/password popups - and while this is great overall behavior that helps encourage users to take advantage of password managers for more secure credential generation and storage, there are times when you don't want the autocomplete popup to appear. There are use-cases such as within an admin interface that allow administrators to manage staff user accounts for example - where you want to offer a field to search for a staff user by their username. In cases like this you don't want the autocomplete popup to try and fill the field with your own username, but rather allow you to enter any number of staff usernames for example. It would be great if one of the standard autocomplete='off' flags or a future variant could be adopted by the browser vendors to provide this clean control of the autocomplete behavior or a standard CSS attribute that if applied always had the intended effect... but alas this is not currently the case.
For now however, if you are dealing with this issue, make sure you are also considering the contents of any placeholder attribute you have added to any username or password <input> fields - as well as any label-like text that appears nearby. By adjusting and experimenting with the values of these labels/attributes you should be able to work around the page-inspection logic the browsers are using to enable these autocomplete popups.
As always with the web, and as some of browser's rendering engines are closed-source, this will likely continue to be more of an art than a science, until a standard is developed to provide control of this feature for all browsers on all platforms, and it may be necessary to occasionally revisit the code to check it against new browser versions to ensure that popups are not re-appearing due to changed page-inspection logic.
If you use <input> field without wrapping it in <form> tag, Safari 11+ or latest would show you auto-fill suggestion. So here is what you can do.
Option 1: Make sure <input> elements are wrapped inside <form> element. Don't set value of name attribute to "username" or "login".
Option 2: Add name attribute and set its value as "search". <input type="text" name="search">
Note: Using autocomplete="off" or autocomplete="false" on either <form> and <input> would not help.
Neither adding following CSS properties would work.
input::-webkit-autofill,
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button
Even with visibility:hidden or/and display:none Safari Ios keeps popping up icons and buttons. For me, the best solution was to set opacity to 0. This doesn't remove unwanted icons, but makes them completely transparent, and thus invisible. Furthermore, it works on whatever background color or img you're using.
input::-webkit-contacts-auto-fill-button {
opacity: 0;
}
The answers are all correct, however most of them are just curing the symptoms. Mostly, you just need to check your name attribute. In case you didn't give any name, name your input something. This helped in my case as without a name safari makes mistakes in recognizing autofillable inputs
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.
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).