LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

[点晴永久免费OA]在input按钮里添加字体图标

admin
2023年5月17日 18:44 本文热度 286

如图,为一个搜索框添加一个放大镜形状的小图标,点击小图标能够submit表单

 

方法一

参考:https://stackoverflow.com/questions/48042213/how-to-use-fontawesome-icon-as-submit-button-in-html-form

修改input属性,代码如下:

HTML结构:

<body>
    <div class="search">
        <form action="search"  target="_blank">
          <input type="text" name="search" placeholder="搜索">
          <input style="font-family: icomoon" value="&#xe986" type="submit">
        </form>
    </div>
</body>
 
 1、直接为input添加font-family属性,把value设定成"&#x对应图标的编码"。
<input style="font-family: icomoon" value="&#xe986" type="submit">

 

2、然后用CSS为图标设定样式。

      .search input[type="submit"] {
        /* 把submit按钮调整到和图标大小相同 */
        width: 20px;
        height: 20px;
        font-size: 20px;
        border: 0;
        background-color: transparent;
        position: absolute;
        right:14px;
        top:50%;
        transform: translateY(-50%);
  /* 鼠标移上去有点击提示 */
        cursor:pointer;
      }


方法二

在div::after插入一个图标,定位到目标位置。

 
1、HTML结构不变,把input的value设置为空:
<input value="" type="submit">
 
2、在div后面插入图标
      div::after{
          font-family: "icomoon";
          font-size: 20px;
          color: #000;
          content:"\e986";
          position: absolute;
          right:14px;
          top:50%;
          transform:translateY(-50%);
          /* 加上这一句,图标就不会挡住点击按钮,达到点击图标就能submit的效果,参考:
          https://stackoverflow.com/questions/28284105/font-awesome-icon-and-text-in-input-submit-button
          */
          pointer-events: none;
      }
 
3、把submit按钮设置成和图标一样的大小,并且用定位使图标和submit按钮重合:
      .search input[type="submit"] {
        width: 20px;
        height: 20px;
        border: 0;
        background-color: transparent;
        /* 鼠标移上去有点击提示 */
        cursor: pointer;
        position: absolute;
        right:14px;
        top:50%;
        transform:translateY(-50%);
      }

该文章在 2023/5/17 18:45:00 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved