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
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
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 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>
In Firefox extra spacing is added around the text value (not just vertical space as would be the case from line-height, but horizontal as well).
Chrome, Opera (has a slightly different line-height issue), and even IE all render submit buttons without adding any extra space.
http://jsfiddle.net/jswartwood/aFCwj/
If you open firebug and hover over the <a> and <input> respectively, you can see that it is not padding, etc.
From the sound of the bug tracker it seems that Firefox puts a "block" inside these form elements?!?! If this is true, why? This makes visual button size very difficult to keep consistent.
After digging through the Firefox source code (layout/style/forms.css) I found ::-moz-focus-inner to be the shadow selector I needed.
I still disagree with mozilla's choice of forcing line-height, but that is another story; in the mean time I may be able to normalize all browsers by setting line-height: normal.
input::-moz-focus-inner {
padding: 0;
border: 0;
}
A working example: http://jsfiddle.net/jswartwood/aFCwj/14/
To answer your original question: I do not believe CSS can successfully style the input submit element perfectly consistent across all browsers.
Every browser renders these elements differently. Explorer's buttons are in keeping with Windows. Safari's buttons are in keeping with Mac styling. Firefox, Chrome, Opera, etc. are going to do their own thing.
When it's important enough for your design that the submit button look the same across all browsers, you would create a custom graphic and make that your button.
Simply replace your submit button code with the following...
<input type="image" src="myButtonImage.jpg" alt="" />
You can optionally use CSS Sprites or JavaScript to swap button images on hover, click, etc.
A button doesn't have to be a button. You can use any other element, like a in your example, or even better span. And bind it click event to submit your form.
Now I know this issue is over-talked about but I cannot seem to find a question that addresses this little gem directly so here goes...
In Opera and IE when a form has focus the default submit input gets some sort of highlight. Like outline is when you have tab focused onto an element.
However, unlike the tab one (dotted lines inside or around which to me is nice and user friendly and so WANT it for my users) this one has some bizarre designs...
Firefox has its own problems but at least you can customise it. It reserves the space for the "highlight"/"border" or whatever you want to call it which means that your input will be bulker than any other browser. - why can't it do what it does for the anchors and have the highlight around the blasted thing?
Opera is odd in itself (Opera 10) since it makes the outline "highlight" whatever black. Now this isn't an issue UNLESS YOU HAVE A BLACK BACKGROUND... and it replaces the original border which is just palmface worthy... what were they thinking.
IE is like Firefox but no known way to customise it..
Now for the question: Is there a way to set the bloody colour in Opera for this focus event (which would solve that issue) or to have it in firefox without having to bloat the design in every other browser or a way to make IE conform at all.
Many thanks in advance
I tried and tried but I don't think this is possible.
button:active{background-color:#f00;}
button:hover{background-color:#0f0;}
That should allow you to control the visual interaction of a button. To target a specific button provide an id value in your HTML on the button tag.
try doing
<input type='submit' autocomplete='off' style='outline:none;'/>
this worked for me in text fields - I'm not sure if it carries over to submit or button elements but it's worth a try.
Kinda hackish, but definitely works..
<input type='submit' onfocus="blur()" />