CSS 输入框添加图标

输入框添加图标

CSS中,可以通过background-image来为输入框添加图标,并通过background-position设置图标的位置,然后通过background-repeat属性来设置图标是否需要重复铺满整个input输入框,比如下方的这个带图标的输入框示例:


语法

  • background-image:url('filepath')
  • background-repeat:value
  • background-positoin:value

输入框添加图标实例代码,及在线编辑器

<input type='text' id='in2'>
<style>
  #in2{background-image:url('../../static/img/logo.png');background-repeat:no-repeat;background-position:5px 5px;width:100%;height:35px;border:1px solid skyblue;}
</style>

全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.