您好!欢迎来到源码码网

源码码网

热门搜索: 淘宝客    点赞系统    虚拟商城源码    小程序源码   

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

  • 软件教程
  • 来源:源码码网
  • 编辑:admin
  • 时间:2021-01-31 22:22
  • 阅读:580

文章主要介绍了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;

小伙伴们有没有get到,是不是很简单呢?关注源码码网,学习更多的开源代码。

全部评论(0)
推荐阅读
  • 毕业求职季,藏书馆APP,拥有主宰自己的力量!
  • 毕业求职季,藏书馆APP,拥有主宰自己的力量!
  • 毕业求职季,藏书馆APP,拥有主宰自己的力量!《从0到1学做直播电商》、《从0到1学做短视频营销》、《摄影基础》、《一学就会的会计入门》、《出纳实操从新手到高手》、《财务报表一本通》、《零起点日语入门一看就会》、《英语零起点入门一学就会》、《人力资源新手的128个怎么办》、《HRD:给世界500强做人力资源管理的咨询笔记》、《人力资源管理理论与实务》
  • 行业资讯
  • 来源:源码码网
  • 编辑:源码码网
  • 时间:2022-08-03 17:50
  • 阅读:517
  • 域名查询被墙,但是网站却可以正常访问,是什么问题
  • 域名查询被墙,但是网站却可以正常访问,是什么问题
  • 使用第三方seo查询工具​检测域名,提示域名被墙,但是网站确实可以正常打开,也能正常访问,而且域名解析也还真有也只做了www和顶级解析,并且网站也已经备案,网站服务器ip也正常,但是使用工具查询就是显示域名被墙,求指导的大神予以指导,谢谢!
  • 互动社区
  • 来源:源码码网
  • 编辑:热点科技
  • 时间:2022-04-11 09:49
  • 阅读:229
  • 百度站长工具站点logo上传后已审核通过但是搜索不显示
  • 百度站长工具站点logo上传后已审核通过但是搜索不显示
  • 百度站长工具站点logo上传后已审核通过但是搜索不显示,这是为什么?百度站点logo审核权限必须要开通上线百度小程序并且适配H5规则,同时必须最少适配一条才可以有优先获得百度搜索站点logo的展示权限,我们网站已获得logo展示权限,并且上传的logo也已审核通过,现在问题是搜索时不展示,请教各位大神!
  • 互动社区
  • 来源:西安网站建设
  • 编辑:admin
  • 时间:2022-02-22 15:05
  • 阅读:291
  • 盲盒小程序很火,怎么使用盲盒小程序盈利?
  • 盲盒小程序很火,怎么使用盲盒小程序盈利?
  • 盲盒小程序系统,就是说顾客在购买支付前,没法预先知道具体产品款式的商品货物盒子,具有很强的随机性质。只有在顾客购买支付后,打开盒子才会知道自己抽到了什么款式的商品。这种盲盒不确定的刺激会加强重复的反复多次的购买决策,因此最近一段时间以来,盲盒成了让顾客上瘾的现象级事物。就从这个角度来看,这和买六合彩比较相似,都有靠顾客运气的成分。
  • 行业资讯
  • 来源:源码码网
  • 编辑:admin
  • 时间:2022-02-21 21:08
  • 阅读:340
联系我们

QQ:2494243972、1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

工作时间:周一至周六 9:00~18:00


联系客服
手机版

扫一扫进手机版
返回顶部