Is it possible to hide or change your "arrow" style from within input or datalists?

Asked

Viewed 244 times

-2

I was preparing a form and one of the field is only necessary to accept number, so I thought, because I do not use input of the kind number? this will be good even for accessibility, no need to do "scripts" to handle this input.

But those "arrows" inside the input of the kind number, or of datalist generates a short discomfort and there arises my great doubt.

It is possible to remove these "arrows"?

Personal note: I may be assuming wrong, but I believe this is generated by the browser and does not have any kind of estilo or tag to change that.

<input type="number" name="numero" min="0" max="100">

                   <br>

                   <input type="text" name="texto" list="alpha">

                   <datalist id="alpha">
                     <option>Something</option>
                     <option>else</option>
                     <option>Select-me</option>
                     <option>Some text with space</option>
                     <option>minding blowing</option>
                   </datalist>

html css

  • NOTE: someone is negativizing the questions of stack overflow brazil, I performed the question in less than 2 minutes, I was already negative.

  • I think this link can help you: https://answall.com/questions/336061/stylesr-um-input-type-number-para-trocar-as-arrows

  • Thank you, but it is not as precise as the reply you have given me.

2 answers

1


Yes, it is possible, using CSS.

To remove arrows from the numeric field, do as follows:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
<input type="number" name="numero" min="0" max="100">

Already to remove from the list, do so on Chrome:

input::-webkit-calendar-picker-indicator {
  display: none;
}
<input type="text" name="texto" list="alpha">

<datalist id="alpha">
 <option>Something</option>
 <option>else</option>
 <option>Select-me</option>
 <option>Some text with space</option>
 <option>minding blowing</option>
</datalist>

  • Those webkit worth to any browser? or I’ll have to search for a webkit for each browser?

  • 1

    Unfortunately not

  • Thank you very much for your attention.

  • I’m just waiting for the time to close this post. soon I evaluate as correct answer.

  • Here are some prefixes of Webkit: https://developer.mozilla.org/en-US/docs/Glossario/Prefixos_vendor

1

I think this way will help you.

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
<input type="number" name="numero" min="0" max="100">

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.