在input按钮里添加字体图标(点晴MIS系统内部教程)

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

方法一

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

<body>

</form>

</div>

</body>

1、直接为input添加font-family属性，把value设定成"&#x对应图标的编码"。

.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设置为空：

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%);

}

网站搜索
搜索范围：搜索方式：关键词(可用空格分开)：