HTML透明输入框以及搜索图标

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

HTML:

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

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}
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;
}

 

共享资源网提供最优质的资源集合。
共享资源网 » HTML透明输入框以及搜索图标

发表评论

共享资源网提供最优质的资源集合

充值中心 开启会员