 |
OA教程 | ERP教程 | 模切知识交流 | PMS教程 | CRM教程 | 开发文档 | 其他文档 |
|
在input按钮里添加字体图标
当前位置：点晴OA办公管理信息系统
→『 经验分享&问题答疑 』
如图，为一个搜索框添加一个放大镜形状的小图标，点击小图标能够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="" type="submit">
</form>
</div>
</body> 1、直接为input添加font-family属性，把value设定成"&#x对应图标的编码"。 <input style="font-family: icomoon" value="" 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 编辑过 |
关键字查询
相关文章
正在查询... 
|
