Is it possible to disable input=time clear button

I am trying to restrict users input when selecting time on input=time. so is it possible to disable the small clear button from the input?

Solution 1:

Just add the required attribute:

<input type="date" required>

I tested it in Chrome and it's working fine for me.

Solution 2:

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; 
}

Solution 3:

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.