HTML在透明输入框里添加图标的实现代码

210624街头

最近在写一个律师推荐前台的网站，在上面搜索框这里出现了问题，我想把搜索的图标放在搜索框里面，但是弄了半天都不大如意……

话不多说，我们直接进入主题 ：
基本思路
其实就把输入框与后面的图标一起放在一个div里面，然后将输入框的

1. border

复制代码

设置为0px，最后设置div的

1. border

复制代码

为最终的外边框
我们最直接上代码：
HTML：

1. <div class="search">
   
2.         <form action="http://baidu.com">
   
3.            <input type="text" placeholder="请输入查找的律师或专长">
   
4.                <span>
   
5.                  <a href="#"><img src="img/icon1.png" alt=""></a>
   
6.                </span>
   
7.           </form>
   
8. </div>

复制代码

CSS:
这里是设置外面整个div的样式

1. .search {
   
2.     width: 250px;
   
3.     height: 35px;
   
4.     border: 1px solid white;
   
5.     border-radius: 30px;
   
6. }

复制代码

这里是设置里面的输入框的长宽、boder为0px、里面的字体大小、点击不会亮边框(outline:none)
设置透明度这里使用

1. rgba()

复制代码

，最后一个属性就是透明度（在0-1之间 ）

1. input {
   
2.     width: 200px;
   
3.     height: 35px;
   
4.     border: 0;
   
5.     font-size: 14px;
   
6.     outline: none;
   
7.     background-color: rgba(255, 255, 255, 0);
   
8.     color: white;
   
9.     font-size: 16px;
   
10.     margin: 0 10px;

复制代码

总结
到此这篇关于HTML在透明输入框里添加图标的实现代码的文章就介绍到这了,更多相关html 透明输入框图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

游戏视听我说

说得太好了，完全同意！

爱吃糖的小鱼儿

6666666666

北极风

太棒了！感谢分享这个信息！

Fomalhaut

嘎嘎嘎嘎嘎嘎嘎

FKY2B

同意你的观点，我们有共鸣。

心灵之光888

我们一起努力，共同解决问题吧。

一壹生一

我们一起努力，共同解决问题吧。

海纹角之星

我完全同意你的观点

清河桥士

太棒了！感谢分享这个信息！