当前位置:首页 >  站长 >  编程技术 >  正文

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

 2021-01-29 16:13  来源: 脚本之家   我来投稿 撤稿纠错

  【推荐】海外独服/站群服务器/高防

这篇文章主要介绍了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:

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

.search {
    width: 250px;
    height: 35px;
    border: 1px solid white;
    border-radius: 30px;
}

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

设置透明度这里使用rgba(),最后一个属性就是透明度(在0-1之间)

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在透明输入框里添加图标的实现代码的文章就介绍到这了,更多相关html 透明输入框图标内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

来源:脚本之家

链接:https://www.jb51.net/web/717790.html

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
html

相关文章

  • 网站页面一定需要HTML静态化吗 实战说明静态化的必要性

    很多刚开始运营网站的伙伴们都要知道网站内的页面需要进行URL优化吗?如设置静态化等,对此,本文就为大家解析一下网站静态化的必要性,有兴趣的朋友们可以了解下哦

    标签:
    html
  • 在html页面中取得session中的值的方法

    这篇文章主要介绍了在html页面中取得session中的值的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

    标签:
    html
  • 如何通过HTML代码提高SEO的效果

    我们的网页是由HTML(超文本标记语言)元素组成的。甚至对于ASP、PHP和其他动态页面,服务器也会将ASP或PHP语句呈现为相应的HTML元素并发送给客户端;对于JavaScript和其他动态页面,客户端会将它们转换为HTML。

    标签:
    seo优化
    html
  • 解决vscode 中保存后html自动格式化的问题

    这篇文章主要介绍了vscode中保存后html自动格式化的问题,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  • Html技巧 语义化你的代码

    最近在读阿当的《Web前端开发修炼之道》,其中有不少东西值得前端路上的朋友学习.结合自己日常编码的一些经验,我将陆陆续续将一些从书中学到的以及自己总结的一些前端方面的技巧分享给大家

    标签:
    html

热门排行

信息推荐