I'm working on a Vue project. In a form, I have a field that is sometimes disabled, meaning not clickable. When I hover over the field I see the typical "disabled icon"
I would like to hide the icon and instead don't display any cursor nor icon.
I've made many attempts with CSS, among other
cursor: none
but it didn't work. Any advice?
Related
Chrome has introduced an updated look to their styles, including time and date picker elements that have a dropdown / overlay element to them.
I'm specifically attempting to style an input type="time" element. Here is a demo of the native element. Worth noting is under Chrome 83 that it shows the updated dropdown page for selections.
Specifically, the dropdown shown above (the 00 and 00 text, with blue backgrounds, on an overlaid element) is what I would like to style or modify in some way.
I have enabled the shadow DOM option within the Google Chrome DevTools. I've been able to identify the pseudo elements for things like the input fields and icons and such, but not the dropdown.
It is difficult to provide further demonstrations or links since this is simply a native input. However, this is an example of the pseudo elements I can see on the basic native input.
My use-case is the app I'm using this for is for uses a dark UI color scheme, and this white popup element is very jarring. I prefer the native HTML input (especially with the keyboard accessibility of selecting the hour / minute / 12hour format quickly) over a custom timepicker.
Ideally I would not want to do anything too hacky here -- am I even approaching this in the right way? Want this not to break whenever Chrome updates.
You cannot change the style of time or datepicker dropdown as per chrome FAQ
https://developers.google.com/web/updates/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome#how_do_i_change_the_appearance_of_the_date_picker
I suggest you to switch over to some custom or bootstrap controls.
If you dont want the dropdown to be displayed, you could add a css rule to hide the icon, when you click that icon is when the dropdown gets displayed.
This rule should work
input[type="time"]::-webkit-calendar-picker-indicator {
display: none;
}
I am currently using a Bootstrap 4.1 button with the class being .btn-outline-primary. In its regular state, the button has a white background with blue text. However, when you hover over the button, the colors are inverted such that the background is blue and the text is white.
The active state of this button is only a highlighted border (with button styling the same as inactive state - white background blue text) and I would like to make it so that when the button is clicked, the button remains in the same style as when the button is hovered.
However, I do not have access to the hover class of the button since it is a bootstrap button and I am wondering how I can achieve this? Here is the button:
<button class='btn btn-outline-primary max-w-250 mx-1 my-1' type='button' id='MyButton' name='happyButton'>
<div class='d-flex flex-column justify-content-center align-items-center overflow-none'>
<div class='ButtonText line-height-16'>"Text Line One"</div>
</div>
</button>
I have tried using css styling using :focus to change the background color, however, this just over-powers the text since the text does not invert and the background now matches the text color.
.btn-outline-primary:focus{
background-color: #18f;
}
I'm not a huge Bootstrap user or I'd look up the relevant classes for you. Instead, I'll walk you through the steps to find them yourself using DevTools. I'll be using Chrome, but the steps are similar for Firefox and Safari.
In a browser (again, preferably Chrome) where the button is rendered, right click on that button. From the menu, select Inspect.
The box that comes up should be on an elements tab, displaying your html. Confirm that the button is highlighted in that display. If it isn't, click on the button's html to highlight it.
The right side of the newly opened box should be a pane describing the selected element, and should be on the Styles tab. Confirm that the css rules that you'd expect to apply to the button are there.
Near the top of that pane, next to the filter box, there is a small button labeled :hov. Clicking that button displays the various pseudoclasses, like :hover, that can be applied to your element. Check the :hover checkbox.
The :hover rules should now display in the css rules list below. Find the relevant declaration (.btn-outline-primary:focus or something similar) and copy the rules it contains. You can then, in your own css, write
.btn-outline-primary:active {
[whatever rules you copied]
}
I have two addenda:
If that doesn't work, go through the first four steps again, this time selecting the :active pseudoclass. If the rules you added are showing up in your rules list (they may be way down!) but aren't working, you have an issue with css specificity and should look that up
I have written this assuming that, when talking about an active button, you were using the term in the technical css sense, which is a change that only lasts so long as the button is held down. If you want the button to change permanently after it is clicked, you will need to use something outside of css: either use some Javascript to update the classes on the button or change it up and use a checkbox
First, I was wondering why I need to add cursor:pointer; for a hover effect on elements like <button>, <label>, checkbox, and radio?
Second, why do <a> tags have this by default?
Please take a look at these answered similar questions
Why don't HTML elements have a CSS cursor pointer by default?
Default cursor on mouse over of a button is not a hand pointer
This comes from historical perspective of web page usage. Labels are meant to be read-only. buttons, checkboxes and radios are visibly clickable by default. So, where-ever any one sees them on page, they know it can be clicked or checked. An anchor tag may hide between other text on the page, and may get hidden from view by styling, so a hover pointer over that (if they have a url to point to) will signify that this is click-able part of text, and will help in page navigation.
You can check these details in many more answers here.
https://ux.stackexchange.com/questions/105024/why-dont-button-html-elements-have-a-css-cursor-pointer-by-default
and the conceptual details of mouse pointers here
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 can use a different way to put to prompt phrase in an input box, but I like the way that the prompt phrase stays even when the cursor is blinking, so this is how it is like:
The website is http://store.apple.com/us
At the TOP-RIGHT corner of the page, there is a search box, with a prompt phrase which is a <span>, which is position: absolute in the container.
Also in the container is the <input> element, with position: static
So the prompt span is imposed on top of the input, to have the current effect.
But what I don't understand is, when the user clicks on the prompt phrase span, won't the clicking be on the <span>? So the <input> will not get the focus, and there will be no cursor blinking, user cannot type into the box. How is that overcome?
I don't think using Javascript to handle this is a good way, because what if the user disabled Javascript? The Apple Store's website also has the effect that with Javascript disabled, if clicking on the prompt phrase span, the prompt phrase span will disappear -- how is that done? I am guessing it is done by some CSS :focus pseudo class or some other ways.
This is a JSFiddle if you want to play with it: http://jsfiddle.net/hndWc/6/
Update: Please don't use Javascript make the input have focus, just like Apple Store with Javascript disabled, it can still make the input have focus.
I updated your fiddle just a bit to show a rough example : http://jsfiddle.net/hndWc/8/
$('#prompt-text').click(function(){
$('#prompt-text').hide();
$('#input-element').focus();
});
This is not complete of course. I'd put in some code to see whether the input or the span has focus so that we can capture the keyboard navigation stuff as well. Not just the click.
EDIT
Apple may not be layering functionality. Having a closer look, they are using HTML5. They are using the placeholder attribute of input elements
http://davidwalsh.name/html5-placeholder
JavaScript is being used. If you disable JavaScript, then you no longer get the initial text.
The way they have it done is, they wrap the span tag with the label tag. Initial text is inside the span tag. On keyuyp, the label tag get hidden so span tag is no longer showing since it's parent is hidden. If you disable JavaScript then you get no label or span tag by default which means no initial text since we can no longer use keyup to hide it.
UPDATE
They use the :focsed CSS selector to achieve background change when input is focused. Check below screenshot.