Perhaps a solution might be this (Fiddle)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
input::-webkit-calendar-picker-indicator {
display: none;/*remove default arrow in Chrome*/
}
.required:after {
content: url(http://s25.postimg.org/6k40u5hcr/arrow.png);
margin-left: -20px;
padding: .1em;
pointer-events:none;/*make png cliccable*/
}
</style>
</head>
<body>
<span class="required"><input id="team" list="bestTeam"></span>
<datalist id="bestTeam">
<option value="Inter">
<option value="Milan">
<option value="Juve">
<option value="Roma">
</datalist>
</body>
</html>
First of all i removed the default arrow in chrome with input::-webkit-calendar-picker-indicator
in after element i set a small image in content property
to make the image clickable use pointer-events:none
This solution works on the latest versions of Chrome, firefox and IE
If this solution does not suit your needs, i apologize for making you lose time.