[點晴永久免費OA]在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 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
