图标输入框（二）

本文介绍如何使用 input 元素， CSS 的 content 属性和伪类 :before 实现一个带图标的输入框。效果如下：

HTML

<div class="password-btn">

    <span></span>

    <input type="text" placeholder="content 属性和 :before 伪类实现带图标的输入框" />

</div>

CSS

.password-btn {

    position:relative;

    width:345px;

    height:40px;       

}

.password-btn> input {

    padding-left:42px;

    padding-right:10px;

    border:2pxsolid lightgray;

    width:100%;

    height:100%;

}

.password-btn> span {

    position:absolute;

    left:5px;

}

.password-btn> span:before {

    content:"\263a";

    font-size:30px;

}

解析

div 元素

• position 为 relative，为子元素 span 的定位做准备

span 元素

• 设置 position 为绝对定位

• 设置合适的偏移值 left
  

伪类 :before

• 设置 content 属性值为一个 unicode 图标字符，参见 https://unicode-table.com/cn/#miscellaneous-symbols

• 根据实际需求设置 font-size，color 等属性值

input 元素

• 大小应该和父元素一致

• 根据图标大小设置合适的 padding-left 值，以此实现光标在图标后输入的效果

• 设置 border 效果

更多 CSS 技巧，请关注微信公众号