欢迎来到源码码网
帮助中心

源码码网

热门搜索: 淘宝客    点赞系统    虚拟商城源码    小程序源码   
免费发布需求
免费发布商品

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

  • 时间:2021-01-31 22:22 编辑:admin 来源:源码码网 阅读:158
  • 扫一扫,手机访问
摘要:文章主要介绍了HTML在透明输入框里添加图标的代码实现过程,代码简单易懂,非常不错对大家的学习或工作具有一定的借鉴和参考价值,需要的朋友参考下吧

文章主要介绍了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)
最新发布的资讯信息
【行业资讯|】热点商城:在西安做一款社区团购小程序需要多少钱?(2021-05-14 09:31)
【行业资讯|】通和解析:教培机构开发在线教育小程序都有哪些好处?(2021-05-13 11:38)
【行业资讯|】微信小程序给我们生活带来了哪些改变(2021-05-13 11:32)
【行业资讯|】热点Saas分销商城系统更新至最新版本4.44(2021-05-13 10:21)
【行业资讯|】通和解析:教培机构开发在线教育小程序都有哪些好处?(2021-05-13 09:22)
【行业资讯|】微信小程序给我们生活带来了哪些改变(2021-05-13 09:20)
【建站技巧|网站运营】https协议下网站嵌入百度地图不能正常显示的解决办法(2021-05-12 23:03)
【行业资讯|】通和智慧新零售商城部分功能介绍(2021-05-12 11:26)
【行业资讯|】小程序的优势有哪些?(2021-05-12 11:25)
【行业资讯|】通和智慧新零售商城部分功能介绍(2021-05-12 09:42)
联系我们

QQ:2494243972、1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

源码码网手机版二维码
联系客服
手机版
源码码网手机版二维码
扫一扫进手机版
返回顶部