Php 如何使用css在表单输入字段中单击可搜索图标

我在表单输入字段中插入搜索图标。像这样

#搜索表单{
位置：相对位置；
}
#搜索形式：之前{
内容：“\f118”；
字体系列：“制药”；
右：0px；
位置：绝对位置；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
背景#387DD8；
填充：10px；
颜色：#fff；
宽度：60px；
}

---

您需要一个提交字段来提交get请求

 <form role="search" method="get" id="searchform" class="searchform" action="http://">
     <input type="search" id="s" name="s" value="" placeholder="Enter a product name" title="Press enter to search">
     <input type="submit" id"submit">
 </form>

然后，您可以在

#submit

上应用样式，而不是

#searchform:before

*{
框大小：边框框；
字体家族：继承；
}
html{
字体大小：62.25%；
}
身体{
字体系列：无衬线；
字体大小：1.6rem；
}
#搜索表单{
位置：相对位置；
宽度：500px；
显示器：flex；
证明内容：中心；
对齐项目：居中；
}
#{
宽度：90%；
身高：100%；
填充：.8rem；
边框左上半径：.3rem；
边框左下半径：.3rem；
边框：1px实心道奇蓝；
右边框颜色：透明；
}
#提交{
宽度：10%；
身高：100%；
填充：.8rem；
边框右上角半径：.3rem；
边框右下半径：.3rem；
边界：0px；
背景：道奇蓝；
}

使用如下所示：


#搜索表单{
位置：相对位置；
}
#提交{
位置：绝对位置；
背景#387DD8；
填充：10px；
颜色：#fff；
宽度：60px；
}

@Sabbir没问题。祝你好运是的，我只是编辑你的CSS代码。有些项目不需要添加。