Как изменить размер иконки внутри ввода с помощью CSS?

Question

У меня есть простой ввод, который содержит значок с правой стороны и текст с левой стороны

Вот что я хотел бы иметь в мобильной версии:

вот что у меня есть в настольной версии

HTML

  <div class="form_group">
   <input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>

csss

@media only screen and (max-width: 768px) and (min-width: 375px)
.form_input {
    font-size: 10px;
    font-family: Roboto;
    font-weight: normal;
    width: 342px;
}
#input-icon {
    background: url(../images/arrow-mobile.png) no-repeat scroll 7px 7px;
    background-position: right;
    /* opacity: 0.4; */
}

**

ОБНОВЛЕНИЕ

** Для упрощения вот мой jsfiddle со значком, который я использую:

http://jsfiddle.net/Mwanitete/z0x6uta2/2/

что мне нужно сделать, чтобы получить то, что я хочу?Я пробовал прозрачность, но не сработал, как ожидалось?

Answer 1

Вы также можете использовать это.

.form_input {
    font-size: 10px;
    font-family: Roboto;
    font-weight: normal;
    width: 342px;
    border: none;
    border-bottom: 1px solid;
}
#input-icon {
    background: url('https://thumb.ibb.co/iAQtup/arrow_mobile.png') no-repeat scroll 7px 7px;
    background-position: 100%;
    background-size: 4%;
 }

 <div class="form_group">
   <input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>

Answer 2

Вот решение, основанное на ответе Дементика,

.form_input {
    font-size: 10px;
    font-family: Roboto;
    font-weight: normal;
    width: 342px;
    border: none;
    border-bottom: 1px solid;
}
#input-icon {
    background: url('https://thumb.ibb.co/iAQtup/arrow_mobile.png') no-repeat scroll 5px 5px;
    background-position: right;
   background-size: 12px;
   height: 4px;
   opacity: 0.4;
 }

.form_input::-webkit-input-placeholder { /* WebKit browsers */
        color: transparent;
        }

jsfiddle для всех желающих увидеть ожидаемый результат

http://jsfiddle.net/Mwanitete/z0x6uta2/16/

Спасибо всем за помощь # StopActa2Though

Answer 3

.form_input {
    font-size: 12px;
    font-family: Roboto;
    font-weight: normal;
    width: 342px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
#input-icon {
    background: url(https://thumb.ibb.co/iAQtup/arrow_mobile.png) no-repeat scroll 7px 7px;
    background-size: 7px;
    background-position: right;
    opacity: 0.4;
}

<div class="form_group">
   <input id="input-icon" type="text" class="form_input " placeholder="W jakim celu z nami kontaktujesz?">
</div>

Предварительный просмотр результата: