---
tags: 30 天軟體工程師體驗營｜2025
---

# 🏅 切版任務 Day23 - input 樣式調整進階練習

今天我們要先介紹的是「如何在 input 欄位中加入 icon」。

這種設計常見於搜尋欄位或登入表單中，能夠提升使用者體驗與整體視覺效果。

1. 我們會先使用絕對定位 (position: absolute) 來放置 icon
2. 調整 input 的內距 (padding-left)，避免文字與 icon 重疊
3. 搭配 Bootstrap icon 圖示使用

下面是一個簡單的範例：

<iframe height="300" style="width: 100%;" scrolling="no" title="每日任務 - 🏅 input 樣式調整進階解答" src="https://codepen.io/yen-kg/embed/ByyGJYE?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yen-kg/pen/ByyGJYE">
每日任務 - 🏅 input 樣式調整進階解答</a> by Yen Kg (<a href="https://codepen.io/yen-kg">@yen-kg</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 題目

請參考設計稿的「部落格頁面，搜尋你感興趣的文章」，完成 input 搜尋區塊樣式開發。

## 回報流程

1. 將答案貼在 CodePen 並複製 CodePen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!--
https://codepen.io/yen-kg/pen/OPPBNPN?editors=1100
-->

回報區
---

| 報數 | Discord 名字 | Codepen／其他回饋 |
|:----:|:-------------------:|:---------------------------------------------------------------------------------------------------------------------------------:|
| 1 | 4chan |[Codepen](https://codepen.io/ijuolaqc-the-looper/pen/OPVPdry?editors=1010)|
| 2 | Hank_08123 |[Codepen](https://codepen.io/hankyang1213/pen/PwqwLYN)|
| 3 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/ByNybJZ)|
| 4 | dean |[Codepen](https://codepen.io/ch933114/pen/zxGxbEb)|
| 5 | Melanie |[Codepen](https://codepen.io/pnrcspte-the-animator/pen/raVaRJP)|
| 6 | tina01170 |[Codepen](https://codepen.io/tina-huang-the-bashful/pen/bNdNJwx)|
| 7 | andy |[Codepen](https://codepen.io/ewnblckz-the-styleful/pen/YPXPMEE)|
| 8 | B |[Codepen](https://codepen.io/Babel777/pen/pvJvBNm)|
| 9 | NAOJUN |[Codepen](https://codepen.io/NAOJUN/pen/xbGbeEV)|
| 10 | 謝天 |[Codepen](https://codepen.io/crisxie/pen/VYLYNGy)|
| 11 | RUDY |[Codepen](https://codepen.io/Rudy-crw/pen/GgJgLVw)|
| 12 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/ogXgRBM)|
| 13 | pastor |[Codepen](https://codepen.io/peter_hung/pen/VYLYNJx)|
| 14 | 阿龍 |[Codepen](https://codepen.io/Nemo-Lin/pen/MYwYMQq)|
| 15 | Min |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/jEPEogw)|
| 16 | Aoi |[Codepen](https://codepen.io/zching07/pen/VYLYojb)|
| 17 | 柔術小子 |[Codepen](https://codepen.io/Li-Lee-Everything-is-PM/pen/xbGbovG)|
| 18 | ying |[Codepen](https://codepen.io/Lara-Lin/pen/GgJgLdG)|
| 19 | Archang |[Codepen](https://codepen.io/pxfnrvgk-the-styleful/pen/WbvvQaz)|
|20|JHT|[Codepen](https://codepen.io/juanht/pen/vEOEPbg)|
| 21 | 7Lun |[Day-23 Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/WbvvrNK)|
| 22 | WEIWEI |[Codepen](https://codepen.io/weiwei93/pen/myJyoVe)|
|23|蛋殼|[Codepen](https://codepen.io/weybrian/pen/raVVyXM)
| 24 | oyll |[Codepen](https://codepen.io/dizzydog-rgb/pen/azOOWKY?editors=1100)|
| 25 | kelsonhouse|[Codepen](https://codepen.io/Kelson-House/pen/EajjmGL)|
| 26 | nora_zizi |[Codepen](https://codepen.io/Nora-Ch/pen/GgJJvmy)|
| 27 | Jane |[Codepen](https://codepen.io/jkmx/pen/GgJJvWO)|
| 28 | Cyan66 |[Codepen](https://codepen.io/Cyan66/pen/yyNNopd)|
| 29 | stone | [Codepen](https://codepen.io/bgrwlzoz-the-reactor/pen/OPVVOpR)|
| 30 | zhe | [Codepen](https://codepen.io/dotheright/pen/vEOOpOg)|
| 31 | Owl666 | [Codepen](https://codepen.io/JenHuang/pen/PwqqOBp)|
| 32 | Michelle | [Codepen](https://codepen.io/bastar_dize/pen/MYwwQay)|
| 33 | Joseph_Kyuu |[Codepen](https://codepen.io/zrzfastd-the-reactor/pen/emNNyKm)|
| 34 | akkk |[Codepen](https://codepen.io/ak-wu-the-decoder/pen/QwbbZNL)|
| 35 | allen3290 |[Codepen](https://codepen.io/udadkudw-the-looper/pen/qEddgdX)|
| 36 | Hugh |[Codepen](https://codepen.io/Hugh-Chen/pen/myJJqXP?editors=1100)|
| 37 | Klaus Chen |[Codepen](https://codepen.io/Klaus-Chen/pen/azOvOZW)|
| 38 | Jessie_Yu | [Jessie_Yu 的 Codepen](https://codepen.io/bakyfkso-the-looper/pen/LEVGyLL)|
| 39 | wei_0982 |[Codepen](https://codepen.io/nico-lai/pen/LEVGOLg)|
| 40 | 力文 |[Codepen](https://codepen.io/liwenchiou/pen/QwbNNMY)|
| 41 | jingle0900 |[Codepen](https://codepen.io/EvaLi0472/pen/emNZeBg)|
| 42 | An |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/jEPPrWL)|
| 43 | Leonard |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/myJPooZ)|
| 44 | Aidd. | [Codepen](https://codepen.io/aiddchen/pen/ogXxKQN)
| 45 | William Hsieh |[Codepen](https://codepen.io/lsaimqxa-the-vuer/pen/OPVpJPp?editors=1100)|
| 46 | 消波塊 |[Codepen](https://codepen.io/PaulHsiao/pen/ZYGGNbQ)|
| 47 | Astrid |[6/7](https://codepen.io/astrid321654/pen/emNEXGE?editors=1100)|
| 48 | 禹成林 |[Codepen](https://codepen.io/useirin/pen/YPXVrVJ)|
| 49 | mercury2508. |[Codepen](https://codepen.io/Mercury2508/pen/yyNzKYe)|
| 50 | ann.328 |[Codepen](https://codepen.io/yqmegupa-the-styleful/pen/VYLQwGy)|
| 51 | haohaoliao |[Codepen](https://codepen.io/tqdtaouh-the-styleful/pen/wBaXdGV?editors=1100)|
| 52 | Chuang |[Codepen](https://codepen.io/uidoytjq-the-solid/pen/wBaxEey?editors=1100)|
| 53 | Rogan |[Codepen](https://codepen.io/RoganHsu/pen/JodmjKp)|
| 54 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/YPXJXrE)|
| 55 | JiaMori |[Codepen](https://codepen.io/jiamori/pen/YPXJXrE)|
<!--
| number | name |[Codepen]()|
-->