您好!欢迎来到源码码网

源码码网

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

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

  • 时间:2021-01-31 22:22 编辑:admin 来源:源码码网 阅读:284
  • 扫一扫,手机访问
摘要:文章主要介绍了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-10-23 12:46)
【行业资讯|】喜上眉梢app源码的开发与部署(2021-10-18 15:47)
【行业资讯|】域名解析后不生效,刷新本地DNS缓存也不生效怎么解决?(2021-10-15 12:56)
【软件教程|软件开发】小圈app源码是如何部署的(2021-09-15 14:50)
【建站技巧|网站运营】最新开发织梦分页网站地图sitemap插件(2021-09-05 22:28)
【建站技巧|网站运营】织梦网站地图生成插件织梦生成网站地图sitemap(2021-09-05 21:18)
【建站技巧|网站运营】织梦网站手机端访问PC端页面跳转至对应的手机站页面(2021-09-03 17:03)
【建站技巧|网站运营】织梦网站在电脑端访问手机端页面自动跳转至对应的PC端(2021-09-03 16:29)
【行业资讯|】域名又涨价了!阿里云com和net后缀的域名又涨价了(2021-09-02 15:58)
【源码教程|】Html实现文字从左向右依次显示的两种方法(2021-08-16 11:12)
联系我们

QQ:2494243972、1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

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


联系客服
手机版

扫一扫进手机版
返回顶部