教你在输入框中添加图标

2024-01-16 14:18 小编
 输入框(input) 聚焦
  
  默认情况下,一些浏览器在输入框获取焦点时(点击输入框)会有一个蓝色轮廓。我们可以设置 input 样式为 outline: none; 来忽略该效果。
  
  使用 :focus 选择器可以设置输入框在获取焦点时的样式:
  
  CSS 实例
  
  input[type=text]:focus {
  
  background-color: lightblue;
  
  }
  
  CSS 实例
  
  input[type=text]:focus {
  
  border: 3px solid #555;
  
  }
  
  输入框(input) 图标
  
  如果你想在输入框中添加图标,可以使用 background-image 属性和用于定位的background-position 属性。注意设置图标的左边距,让图标有一定的空间:
  
  CSS 实例
  
  input[type=text] {
  
  background-color: white;
  
  background-image: url('searchicon.png');
  
  background-position: 10px 10px;
  
  background-repeat: no-repeat;
  
  padding-left: 40px;
  
  }


在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码