input如何添加圖標


 

代碼:<input type="text" class="user" />

 

設置class類屬性,添加小圖標。創建<style>標簽,然后在這個標簽里面設置user樣式。

   1.使用background-image設置input背景圖片;

   2.background-size設置背景圖片的大小;

  3.background-position設置背景圖片的位置;

  4.background-repeat設置背景圖片不重復;

  5.padding設置圖片的內邊距。

 

css樣式代碼:

<style type="text/css">

 .user{

   background-image: url(img/user.png);/*設置小圖標*/

  background-size: 25px 25px;/*小圖標的大小*/

  background-position: 5px 4px;/*小圖標在input的位置*/

  background-repeat: no-repeat;/*背景小圖標不重復*/

  padding: 8px 10px 8px 40px;/*設置input內邊距*/

  /*設置input樣式好看*/

  border:1px solid #ddd;

  margin: 30px;

  width: 220px;

}

</style>

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM