Unfortunately a background-image would still allow the default arrow to be visible over the top.
I still think a pseudo element is the way to go – something like this http://codepen.io/anon/pen/xRjzKg
The default arrow is still there, its just obscured by the faux arrow, and pointer-events allow the click/tap to pass through.
Note that the faux arrow will be visible in those browsers that don’t support datalist so you’d need to compensate for that. http://caniuse.com/#search=datalist
worked like a charm! thanks a lot!