您好!欢迎来到源码码网

源码码网

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

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

  • 时间:2021-01-31 22:22 编辑:admin 来源:源码码网 阅读:360
  • 扫一扫,手机访问
摘要:文章主要介绍了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)
最新发布的资讯信息
【行业资讯|】全民达人app系统 全民探店app开发全民探店一键发布视频自带地址poi(2021-12-30 11:01)
【源码教程|开源源码】开源低代码在线设计平台源码在线表单设计(2021-12-11 13:41)
【源码教程|开源源码】开源原生PHP评论系统源码可任意对接至任意网站(2021-12-11 13:16)
【源码教程|开源源码】开源代码朔方会员管理软件 - shuofang-MemberManagement(2021-12-11 13:09)
【源码教程|开源源码】开源书签分享平台网站源码 Hackershare系统(2021-12-11 13:03)
【行业资讯|】社交APP:同城约会/陌生人社交/婚恋交友(2021-12-07 15:02)
【源码教程|开源源码】基于ThinkPHP开发的Im聊天系统online_chat客户端源码(2021-11-26 20:17)
【源码教程|开源源码】ThinkPHP开发在线聊天软件系统源码ttltChat服务端下载(2021-11-26 20:11)
【开发工具|其他常用工具】TLv8 IDE 基于Eclipse的快速开发工具(2021-11-26 19:53)
【行业资讯|】什么是AGPL协议?AGPL协议详细介绍(2021-11-26 18:41)
联系我们

QQ:2494243972、1105326722

投诉举报:1105326722@qq.com

广告合作:QQ 110532672

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


联系客服
手机版

扫一扫进手机版
返回顶部