How to disable the arrow mark of the textbox

Question

I will assign the datalist to the text box, it is working but I want to remove the right side arrow mark.

<input type="text" list="categoryList" name="category">

<datalist id="categoryList">
    <option value="entertainment">
    <option value="education">
    <option value="photography">
    <option value="sports">
</datalist>

enter image description here

http://jsfiddle.net/utrfectL

it's as limited as, or more than, the `select` element, so I don't think you can. http://stackoverflow.com/questions/13693482/is-there-a-way-to-apply-a-css-style-on-html5-datalist-options — ps2goat, Aug 28 '14 at 03:56

Jake · Accepted Answer · 2014-08-28T04:03:06.140

3

input::-webkit-calendar-picker-indicator {
  display: none;
}

CSS seems to do it.

From tests it looks like the arrow is only added by webkit browsers (does not appear either way in Firefox or IE) so that should be all you have to do.

JSfiddle

edited Aug 28 '14 at 04:03

answered Aug 28 '14 at 03:57

Jake

1,207
2
28
46

That will only work for Chrome and Safari (webkit) However, the OP's issue doesnt seem to be present in FFox. – ryanlutgen Aug 28 '14 at 03:59
It appears as though the arrow only appears for webkit browsers anyway. – Jake Aug 28 '14 at 04:02
I stand corrected. At least webkit was nice enough to allow overriding this. – ps2goat Aug 28 '14 at 05:07

How to disable the arrow mark of the textbox

1 Answers1