Remove background arrow from date input in Google Chrome v20
As far as I know you can't disable it at the moment.
There is a discussion going on here:
https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec
Perhaps they will add some -webkit
selectors to control the styling.
For now you might have to use <input type="text">
instead.
EDIT:
As per Jeremy's answer, it is now possible to remove the arrow and spin buttons. Details can be found on webkit.org: Styling Form Controls - WebKit
The CSS to hide the controls is:
<input type="date" class="unstyled" />
.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
However, this will only hide and not disable the native calendar! - you can still activate the calendar by pressing Alt+Down Arrow (at least on Windows).
To disable, you need to add a little JavaScript as described on the above webkit.org page:
<input type="date" id="dateInput" class="unstyled" />
dateInput.addEventListener('keydown', function(event) {
if (event.keyIdentifier == "Down") {
event.preventDefault()
}
}, false);
You can see it working in this jsfiddle.
How to remove the unwanted mark from date input field?
You could use the psuedo-class here
In CSS put this code
input[type=date]::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
then for the input tag you need to add required
like this
<input type='date' required>
Disable native datepicker in Google Chrome
To hide the arrow:
input::-webkit-calendar-picker-indicator{
display: none;
}
And to hide the prompt:
input[type="date"]::-webkit-input-placeholder{
visibility: hidden !important;
}
How to disable datepicker arrow for a specific class
Use .class
selector along with with attribute
selector
input[type="date"].disabled::-webkit-calendar-picker-indicator { display: none;}
<input type="date" class="disabled">
<input type="date">
Remove Datalist Dropdown Arrow in Chrome
Thanks to the comment by alexander farkas, here is the style rule to remove the arrow:
input::-webkit-calendar-picker-indicator {
display: none;
}
Related Topics
How to Run the CSS3 Animation to the End If the Selector Is Not Matching Anymore
How to Set a Background in a Bootstrap Column That Oversizes the Div
Is This HTML Structure Valid? Ul > Div > { Li, Li } , Div > { Li, Li } , Div > { Li, Li }
Height Calculation by Browsers:Containing Blocks and Children
Why Is There Space Between Line Boxes, Not Due to Half Leading
How to Send HTML Email Using Linux Command Line
How to Vertically Align Text with Icon Font
Making Text Background Transparent But Not Text Itself
Can You Take a "Screenshot" of the Page Using Canvas
How to Embed a Swf File in an HTML Page
How to Make Type="Number" to Positive Numbers Only
Html5Shiv VS Dean Edwards IE7-Js VS Modernizr - Which to Choose
Is HTML Considered a Programming Language
Node.Js - How to Send Data from HTML to Express
Hide HTML Horizontal But Not Vertical Scrollbar
Jquery Click Function Doesn't Work After Ajax Call
CSS Transition from Display None to Display Block, Navigation with Subnav