在輸入框內加入小圖標，主要有兩種方法
一、使用標簽<i>存放圖標，利用絕對定位調整位置，圖標圖層需要在input之上
二、在input內直接使用背景圖片放在圖標，利用background-position調整位置
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>輸入框小圖標</title> 6 <style type="text/css"> 7 .box01{ 8 color: #434343; 9 position: relative; 10 margin-bottom: 20px; 11 } 12 .box01 input{ 13 -webkit-appearance: none; 14 -moz-appearance: none; 15 appearance:none ; 16 outline: 0; 17 width: 270px; 18 height: 30px; 19 border:0px solid #fff; 20 border-radius: 20px; 21 box-shadow:0 0 5px 2px rgba(0,0,0,0.1); 22 padding: 0 30px 0 15px; 23 } 24 .box01 label{ 25 font-size: 16px; 26 z-index: 2; 27 position: absolute; 28 left: 109px; 29 top:15%; 30 color: #b2b2b2; 31 } 32 /*利用<i>來安放圖標*/ 33 .icon{ 34 display: inline-block; 35 height: 16px; 36 width: 16px; 37 background-image: url(search.svg); 38 background-repeat: no-repeat; 39 position: absolute; 40 top: 24%; 41 left: 290px; 42 z-index: 2; 43 } 44 /*利用背景圖片安放圖標*/ 45 #tip02{ 46 padding: 0 10px 0 35px; 47 background-image: url(search.svg); 48 background-repeat: no-repeat; 49 background-position: 10px 7px; 50 } 51 52 </style> 53 </head> 54 <body> 55 <div class="box01"> 56 <input type="text" id="tip" placeholder="搜索你喜歡的"> 57 <i class="icon"></i> 58 </div> 59 60 <div class="box01"><input type="text" id="tip02" placeholder="fine your need"></div> 61 62 </body> 63 </html>