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

源码码网

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

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

  • 时间:2021-01-31 22:22 编辑:admin 来源:源码码网 阅读:214
  • 扫一扫,手机访问
摘要:文章主要介绍了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)
最新发布的资讯信息
【源码教程|C语言教程】计算机编程语言有哪些?该如何有选择性的去学?(2021-07-19 21:38)
【源码教程|C语言教程】C语言开发学生信息管理系统演示及说明(文件版)(2021-07-19 18:19)
【源码教程|C语言教程】C语言开发贪吃蛇小游戏演示及说明(2021-07-19 18:13)
【行业资讯|】特种考试模拟系统都有哪些功能(2021-07-19 16:28)
【行业资讯|】济宁通和带你了解一下“一款线上的特种考试模拟系统”(2021-07-19 16:27)
【建站技巧|网站运营】二级域名对网站SEO优化有何利弊?(2021-07-17 15:07)
【软件教程|软件开发】Web开发之Vue与HTML5关系(2021-07-17 11:01)
【软件教程|软件开发】Electron+Vue搭建跨平台桌面应用Hello World(2021-07-17 10:51)
【源码教程|Java教程】Java方法里Overload 和 Override 的区别是什么?(2021-07-17 10:04)
【建站技巧|数据库】SQL | DDL、DQL、DML、DCL 和 TCL 命令介绍(2021-07-17 10:00)
联系我们

QQ:2494243972、1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

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