Html 如何使用css更改输入中图标的大小？

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

以下是我想要的手机版：

以下是我到目前为止在桌面版中所做的

HTML

**

更新

** 为了简化事情，这里是我使用的带有图标的JSFIDLE：

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

.form\u输入{
字体大小：12px；
字体系列：Roboto；
字体大小：正常；
宽度：342px；
边框：1px实心#ccc；
边界半径：5px；
}
#输入图标{
背景：url(https://thumb.ibb.co/iAQtup/arrow_mobile.png)无重复滚动7px 7px；
背景尺寸：7px；
背景位置：右；
不透明度：0.4；
}

.form\u输入{
字体大小：12px；
字体系列：Roboto；
字体大小：正常；
宽度：342px；
边框：1px实心#ccc；
边界半径：5px；
}
#输入图标{
背景：url(https://thumb.ibb.co/iAQtup/arrow_mobile.png)无重复滚动7px 7px；
背景尺寸：7px；
背景位置：右；
不透明度：0.4；
}

您也可以使用此选项

.form\u输入{
字体大小：10px；
字体系列：Roboto；
字体大小：正常；
宽度：342px；
边界：无；
边框底部：1px实心；
}
#输入图标{
背景：url（'https://thumb.ibb.co/iAQtup/arrow_mobile.png'）无重复滚动7px 7px；
背景位置：100%；
背景大小：4%；
}

您也可以使用此选项

.form\u输入{
字体大小：10px；
字体系列：Roboto；
字体大小：正常；
宽度：342px；
边界：无；
边框底部：1px实心；
}
#输入图标{
背景：url（'https://thumb.ibb.co/iAQtup/arrow_mobile.png'）无重复滚动7px 7px；
背景位置：100%；
背景大小：4%；
}

---

以下是基于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，任何有兴趣的人都可以看到预期的结果

---

感谢大家的帮助#尽管如此

这里有一个基于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，任何有兴趣的人都可以看到预期的结果

---

感谢所有人的帮助#StopActa2尽管

您可以使用

背景大小：20px更改输入字段内的图标大小
下面根据您的代码给出了示例

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

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

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

你是不是偶然使用了fontawesome之类的字体图标包？可以显示一种不同的技术，这将更加有利于分辨率。克里斯：不，我没有使用字体，我使用的是自定义图标；）您提供的代码表明您正在使用一些库进行设计，请告诉我们是哪一个库。或者提供所有相关代码以获得相同的屏幕截图。@不，这里没有使用干净的html。好的，对输入应用不透明度将直接影响整个输入，媒体查询需要在其下方括起这些类以应用它们（除非在示例中这只是一个输入错误），但由于它只是一个png，可以始终将您的不透明度添加到png文件本身并交换图像，或者使用其他元素将其放置在那里而不是输入并对其应用不透明度。您是否偶然使用了fontawesome之类的字体图标包？可以显示一种不同的技术，这将更加有利于分辨率。克里斯：不，我没有使用字体，我使用的是自定义图标；）您提供的代码表明您正在使用一些库进行设计，请告诉我们是哪一个库。或者提供所有相关代码以获得相同的屏幕截图。@不，这里没有使用干净的html。好的，对输入应用不透明度将直接影响整个输入，媒体查询需要在其下方括起这些类以应用它们（除非在示例中这只是一个输入错误），但由于它只是一个png，可以始终将您的不透明度添加到png文件本身并交换图像，或者使用其他元素将其放置在那里而不是输入，并对其应用不透明度。您的代码似乎很好。我猜媒体查询是错误的。（点击运行代码查看结果）@Domentic您的代码没有给我们预期的结果，这里是jsfidle和图标我正在使用您的解决方案接近我想要的，但是占位符呢？我不知道你指的是什么，占位符也消失了。请看图片。您的代码似乎很好。我猜媒体查询是错误的。（点击运行代码查看结果）@Domentic您的代码没有给我们预期的结果，这里是jsfidle和图标我正在使用您的解决方案接近我想要的，但是占位符呢？我不知道你指的是什么，占位符也消失了。参见图。