[點(diǎn)晴永久免費(fèi)OA]在input按鈕里添加字體圖標(biāo)
如圖，為一個(gè)搜索框添加一個(gè)放大鏡形狀的小圖標(biāo)，點(diǎn)擊小圖標(biāo)能夠submit表單
方法一參考：https://stackoverflow.com/questions/48042213/how-to-use-fontawesome-icon-as-submit-button-in-html-form 修改input屬性，代碼如下： HTML結(jié)構(gòu)： <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設(shè)定成"&#x對(duì)應(yīng)圖標(biāo)的編碼"。 <input style="font-family: icomoon" value="" type="submit">
2、然后用CSS為圖標(biāo)設(shè)定樣式。 .search input[type="submit"] {
/* 把submit按鈕調(diào)整到和圖標(biāo)大小相同 */
width: 20px;
height: 20px;
font-size: 20px;
border: 0;
background-color: transparent;
position: absolute;
right:14px;
top:50%;
transform: translateY(-50%);
/* 鼠標(biāo)移上去有點(diǎn)擊提示 */
cursor:pointer;
} 方法二在div::after插入一個(gè)圖標(biāo)，定位到目標(biāo)位置。 1、HTML結(jié)構(gòu)不變，把input的value設(shè)置為空：
<input value="" type="submit"> 2、在div后面插入圖標(biāo)
div::after{
font-family: "icomoon";
font-size: 20px;
color: #000;
content:"\e986";
position: absolute;
right:14px;
top:50%;
transform:translateY(-50%);
/* 加上這一句，圖標(biāo)就不會(huì)擋住點(diǎn)擊按鈕，達(dá)到點(diǎn)擊圖標(biāo)就能submit的效果，參考：
https://stackoverflow.com/questions/28284105/font-awesome-icon-and-text-in-input-submit-button */ pointer-events: none;
} 3、把submit按鈕設(shè)置成和圖標(biāo)一樣的大小，并且用定位使圖標(biāo)和submit按鈕重合：
.search input[type="submit"] {
width: 20px;
height: 20px;
border: 0;
background-color: transparent;
/* 鼠標(biāo)移上去有點(diǎn)擊提示 */
cursor: pointer;
position: absolute;
right:14px;
top:50%;
transform:translateY(-50%);
} 該文章在 2023/5/17 18:45:00 編輯過(guò) |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
