How to Get Rid of X and Up/Down Arrow Elements of a Input Date

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.

after selecting date how to remove X mark(clear button) in html 5 [input type=date]

In Chrome you can use

input[type="date"]::-webkit-inner-spin-button,    
input[type="date"]::-webkit-clear-button { display: none; }

Firefox, on the other hand, doesn't have support for this.

You'd probably be better off using a 3rd party jQuery plugin.

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">

How to Remove Arrow on Input type Number with Tailwind CSS

So i found the solution for this -> On your global.css you have to add

@layer base {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

Is there a way to remove the arrows from an input type but keeping it scoped to only a specific component?

scoped styles are designed to affect only the component itself and no child components.

Docs

With scoped, the parent component's styles will not leak into child components. However, a child component's root node will be affected by both the parent's scoped CSS and the child's scoped CSS. This is by design so that the parent can style the child root element for layout purposes.

Problem here is that <input> is not for sure root element of v-text-field

You can probably try to use deep selector mentioned in the linked issue but is there any reason to use scoped styles if the application of specific class is needed to trigger the behavior ?

Working codepen (without scoped stypes)

And here is how you can do it with scoped styles:

<style scoped>
.inputPrice >>> input[type="number"] {
  -moz-appearance: textfield;
}
.inputPrice >>> input::-webkit-outer-spin-button,
.inputPrice >>> input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
</style>

---

Related Topics