如何使用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/

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

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>

结果预览：

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

这是基于 Dementic 的答案的解决方案，

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

您可以使用background-size:20px;更改输入字段内的图标大小background-size:20px; 下面根据您的代码给出示例

#input-icon {
              background-size: 20px;
            }