CSS中输入框（搜索框）的实现技巧

Posted 2020-10-03

    我们都知道在一般网站上出现的输入框里都会有各种各样的图标、文字等样式。那么如何实现input输入框中插入图标呢？一般的方法是：用定位将需要的图标用定位的方式实现，这种方式虽然可以实现，但是如果我们需要插入的不止一个图标呢？那还用定位的话，工作量可能就要加大许多了。下面小编推荐一个方法，列表法：将整个input输入框看作一个列表ul，而其中的各种样式则可以看作单个项目li。将原本input输入框的边框样式设置为列表ul的边框样式就可实现input输入框的边框样式，而各个图标之类的样式可直接插入li中，还能设置单独的样式，修改起来也更加方便。