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

基本思路

其实就把输入框与后面的图标一起放在一个div里面，然后将输入框的border设置为0px，最后设置div的border为最终的外边框

我们最直接上代码：

HTML：

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

CSS:

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

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

这里是设置里面的输入框的长宽、boder为0px、@ www.xuepai.net里面的字体大小、点击不会亮边框(outline:none)
设置透明度这里使用rgba()，最后一个属性就是透明度（在0-1之间 ）

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

 

posted @ 2026-01-11 12:58  zxcva  阅读(16)  评论(0)    收藏  举报