0

I've created a text input with a "list" attribute and I'm wondering if there is a way to style the default dropdown arrow.

<input type="text" name="subject" id="subject" list="subjects" placeholder="Subject">
<datalist id="subjects">
    <option value="General Question"></option>
    <option value="Technical Support"></option>
    <option value="Billing Question"></option>
    <option value="Report a Bug"></option>
</datalist>

Here's the result. enter image description here

jwerre
  • 8,508
  • 9
  • 54
  • 65
  • I suspect that the answer will be the same as - http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript?rq=1 – Paulie_D Sep 23 '15 at 16:04
  • yes, you can hide (appearance:none;) and replace with a image ( background: url(your path) no-repeat right top; ) – Luís P. A. Sep 23 '15 at 16:04
  • @Paulie_D I tried that in Chrome but it didn't work – jwerre Sep 23 '15 at 16:05
  • If you tried something and it didn't work you should show us that...perhaps you made a mistake. Otherwise your question is likely to be closed. – Paulie_D Sep 23 '15 at 16:06

1 Answers1

1

Just add this to your CSS to remove and add the arrow/indicator from the input in chrome.

//Remove Native Arrow
input::-webkit-calendar-picker-indicator {
  display: none;
}

//Add Image Arrow
input[list]{
   background:url("//www.bricklink.com/3D/down.png") no-repeat right 1px; // Adjust your needs
}

DEMO HERE

Luís P. A.
  • 9,119
  • 2
  • 22
  • 34
  • Yes, Luis. That's exactly right! Thank you. Can you edit your answer to include `input[list]{background:url("down_arrow.png") no-repeat right 1px}`. That way instead of just hiding the arrow you're replacing it. Then I'll give the you correct answer. – jwerre Sep 23 '15 at 16:25