Is it possible to disable input=time clear button
Just add the required
attribute:
<input type="date" required>
I tested it in Chrome and it's working fine for me.
TL;DR there is no HTML-only or CSS-based way to have a time input and remove the clear button that works for all major browsers. To solve this for all browsers, you should use a JavaScript library and server validation (if you want to ensure a user is sending valid data). If you don't want to use JS, then it's probably best to use both approaches below. See this table for a comparison of compatibility:
+---------+-------------------------+--------------+-------------+
| | <input required> | CSS approach | JS approach |
+---------+-------------------------+--------------+-------------+
| Firefox | Y | N | Y |
| Chrome | Y | Y | Y |
| Safari | N | Y | Y |
+---------+-------------------------+--------------+-------------+
CSS Approach
The prefix pseudo elements (::-webkit-*
, ::-ms-*
, ::-moz-*
) explained by @Ilia Rostovtsev are browser specific and are not standard, even though many browser specific elements have eventually been adopted as standards and even though some of these non-standard pseudo elements are adopted by most or all major browsers. At this time, I am not aware of any Firefox equivalent for the webkit
and ms
answers.
Status: Works on all browsers except Firefox
required
Approach
<input type="time" required>
Looks good, works well on Chrome and Firefox, but does not work on Safari. In fact, Safari doesn't have a time
or date
type.
Status: Doesn't work on Safari
JS Solution
If you want it to work on all browsers, use a JS library like js-datepicker. It's been tested to work across browsers and restricts user input, with no clear button.
Note on server validation
If you care at all about your back-end data and how it is stored at all (hint: You should), then validate it in the back-end too! Restricting user input on the front-end won't stop it from getting messed up by a determined or confused user. Server validation helps avoid strange bugs or XSRF injection attempts.
Your straight-forward solution for all up-to-date browsers could be:
input[type="time"]::-webkit-clear-button {
display: none;
}
If you're willing to specify it only for Internet Explorer 10 you should style it with
::-ms-clear
pseudo-element:
input[type="time"]::-ms-clear {
display: none;
}
You could also do it using width
and height
for all input
elements:
input::-ms-clear {
width: 0;
height: 0;
}
If you want to apply it only to input with text type:
input[type=text]::-ms-clear {
display: none;
}
EDIT 1:
If it doesn't work, then you must make sure that you haven't selected browser/document mode other than IE10/Standard in F12 tools!
EDIT 2:
Additionally you might find other pseudo-controls interesting:
/* Hide the cancel button */
::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* Hide the magnifying glass */
::-webkit-search-results-button {
-webkit-appearance: none;
}
/* Remove the rounded corners */
input[type=search] {
-webkit-appearance: none;
}