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

**

更新

**为了简化这里的事情，我的jsfiddle带有我正在使用的图标：

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

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

标签： htmlcss

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>

结果预览：