I have an input type date on a web form. When a user prints the form, the clear button (the gray circle w/ an "x" in it) prints next to the date. Obviously this isn't ideal. I have played around w/ a few moz kits but I cant make that clear button invisible on print, no matter what I have tried thus far. Also, the form is being used exclusively in Firefox. Any advice on making this work would be greatly appreciated!
I have tried using this in a css document under #media print {}
input[type=date]::-ms-clear {
display: none;
}
I have tried the same thing with:
::-webkit-search-cancel-button
neither has any effect.
It is not possible to remove the clear button in FireFox. The ::ms-clear feature is only for Microsoft browsers, as described in the MDN documentation.
https://developer.mozilla.org/en-US/docs/Web/CSS/%3A%3A-ms-clear
You need to design your own date picker from scratch or use one from a library.
Related
I have a toolbar of buttons that are gray by default but when one button is clicked on that button is made white to indicate that that is the page you are on. This is achieved using a class and the below css.
.btn-details:focus {
color: #fff;
}
This works fine except when I change windows and then go back. For example, if I have my page open it is working find, then I switch to an Excel window and then back to my page the white highlighting is now gone. How can I keep the button in focus even when the window is changed?
Unfortunately I think you need to take your time to focus on how CSS works.
You are using the: focus selector. Know that it does what you asked it to. If the button loses focus and your style no longer holds.
I think this is exactly what happens when you use other apps.
I advise you to add a CSS class on the button clicked and to remove this same class on the other buttons.
If you have difficulty implementing this, please come back to me. I would make a small example depending on your level.
See you soon !
I found that <input type=“search”> only works in Chrome and IE, but not in Firefox.
How can I make <input type=“search”> show the cancel button (x) in Firefox?
Webkit derived browsers put in an x to clear a value. Firefox does not. However firefox supports this feature, but it does nothing about it and you need to style it your self to show the X button in firefox.
Following link will help you to achieve the goal: HTML Textbox with a clear button in Pure CSS and without JavaScript
While the accepted answer is working as it can be seen in the codepen,
I feel the need to explain how this is working and what to be aware of.
As it took me quite some time to get it working as expected.
For anybody who was wondering how the clear is working type="reset" is causing this. Read more about it here
elements of type reset are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.
This brings us to the second point of what to be aware of.
As the docs explains, the input or button of type reset will only work within a form. However, this creates a problem when having multiple inputs in a form, as all of them will be reset.
Another cavity would be the fact, that while fixing the clear button on firefox this will now produce multiple clear buttons in all the other browsers that do have support for it.
A little feature is that the css content also accepts a url(). This means that for instance custom svg's can be used as a clear icon.
I'm trying to save and copy a website trough chrome.
Everything works correctly except for the fact that I can't replicate the Yellow color of the login textboxes.
They are yellow before you click them and write something. Once you start writing, they become white.
As you can see, there's this portion of code that I don't know where to add. I've been struggling for the past 2 hours to solve this, and any help would be very much appreciated.
Thank you!
Here's the Immage
You don't have to style anything. It's Chrome that add this color if you autofill the input. If you still wanna override the default style, use this selector:
input:-webkit-autofill {
background-color: yellow;
}
Keep in mind that this only apply in webkit browser(Chrome and Safari). You can read more with this link:
https://developer.mozilla.org/en-US/docs/Web/CSS/:-webkit-autofill
Clicking in spinner in Chrome datapicker causes continuous scroll in Chrome.
To reproduce, open latest demo
http://www.ok-soft-gmbh.com/jqGrid/OK/dateInput_48_bootstrap.htm
from answer
How to use native date picker in both form and row editing in free jqgrid
in Chrome , click in date to edit.
Click in up or down spinner and keep cursor in this spinner. Date scrolls indefinitely.
How to fix this so that single click increments or decrement value only by +1 or -1 ?
I think that one have to use use ::-webkit-inner-spin-button which allows to customize input spinners in CSS3 (see here). The problem is just it's really difficult to find the documentation of CSS properties which can be used in the case. The only well-known setting is
input[type=date]::-webkit-inner-spin-button {
display: none;
}
which just remove the spinner. No spinner - no problem. It's probably exist a better way to customize the spinner, but I didn't found it.
I was delighted to discover that Android 2.2 supports the position:fixed CSS selector. I've built a simple proof-of concept, here:
http://kentbrewster.com/android-scroller/scroller.html
... which works like a charm. When I attempt to add an INPUT tag to my header, however, I hit trouble. On focus, every device I've tried so far clones the INPUT tag, gives it an infinite Z-index, and repaints it on top of the old tag. The clone is in roughly the right position, but most of its parent's CSS (including, of course, position:fixed) is ignored. The cloned INPUT tag is the wrong size and shape, and when I scroll the body of the page, it scrolls up and off the screen.
Once it's off screen, hilarity ensues. Sometimes the device will force the scrolling part of the body back down so the cloned blank is back in view; sometimes the keyboard goes away even though the visible box seems to remain in focus; sometimes the keyboard cannot be dismissed even though the INPUT blank is clearly blurred. Here's an example you can run on your Android 2.2 device to see what's happening:
http://kentbrewster.com/android-input-style-bug/
Styling input:focus has not done the trick for me yet, nor have many different brute-force attempts to listen for focus() and blur() with JavaScript and do the right thing with focus and the keyboard.
Thanks very much for your help,
--Kent
This will probably not be resolved until Android switches to using Chrome for its WebView. The current Android browser creates an Android TextView on top of the page when an HTML input field is focussed. Apparently they don't style or position it correctly. You can see it go more wrong on pages that use contentEditable.
The current Chrome-for-Android implements the WebKit IME interface, so input fields are drawn by WebKit (and lose some of the niceties of the Android TextView on ICS) and shouldn't have issues like this.
The solution is to add:
input {
-webkit-user-modify: read-write-plaintext-only;
-webkit-tap-highlight-color: rgba(255,255,255,0);
}
in your css.
You might be able to solve it by using a bug in Android: http://code.google.com/p/android/issues/detail?id=14295.
That is, don't display the input field right away. Instead, display an overlay div which listens on click and hides itself and shows the hidden input, and give the input focus. This somehow prevents Android from using the wierd input that gets placed on top of everything, and is instead using the browsers input field which you can style any way you want.
As you'll note in the bug raport though, this doesn't work with input[type="number"]...