qhantime

 

代码:<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>

 

分类:

技术点:

相关文章:

  • 2021-12-09
  • 2021-10-06
  • 2021-05-20
  • 2021-04-17
  • 2022-02-16
  • 2022-02-17
  • 2022-12-23
  • 2021-07-31
猜你喜欢
  • 2021-11-17
  • 2021-04-09
  • 2021-11-17
  • 2022-12-23
  • 2021-12-24
  • 2021-09-09
  • 2022-12-23
相关资源
相似解决方案