html - 如何使用CSS更改输入内图标的大小？

Question

我有一个简单的输入框，右边是一个图标，左边是文本

这是我希望在移动版本中拥有的内容:

这是我目前的桌面版

HTML

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

CSS

@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; */
}

**

UPDATE

**为了简化这里的事情是我的 jsfiddle 与我正在使用的图标:

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

我需要做什么才能得到我想要的？我尝试了不透明度但没有按预期工作？

Answer 1

.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>

结果预览: