В общем виде с текущими условиями вы не сможете поменять цвет вашей стрелки через CSS-свойства. Либо выносите вашу иконку в отдельное изображение и элемент/псевдоэлемент и пользуйтесь фильтрами, например так (инпутам нельзя добавлять псевдоэлементы, придется заменить на button
):
button {
position: relative;
padding-right: 70px;
}
button:after {
position: absolute;
content: '';
right: 10%;
top: 10%;
background-image: url(http://www.clker.com/cliparts/1/H/k/P/S/l/dezzit-right-bt-hi.png);
background-size: 100% 100%;
width:30px;
height:14px;
}
.huerotate:after {
filter: hue-rotate(45deg);
}
<button>неповторимый оригинал</button>
<button class="huerotate">изменённая пародия</button>
Или воспользоваться SVG или иконочным шрифтом и вставить вашу стрелку внутрь кнопки и стилизовать через CSS:
button {
position: relative;
padding-right: 50px;
}
button svg {
fill:none;
stroke: red;
position: absolute;
right: 10%;
top: 15%;
}
<button>
click me
<svg width=20 height=10>
<polyline points="15,0 20,5 15,10"></polyline>
<polyline points="0,5 20,5"></polyline>
</svg>
</button>