文本框里如何带上图标和文字提示

相信我们平时开发的过程中，会遇到这种需求：

这里是一个输入框，里面有提示文字的同时，还有一个小图标。这里我的做法是使用一个父元素包裹住文本框，利用父级元素的背景图片来完成小图标的实现。提示文字部分则使用文本框的placeholder来解决。

参考代码如下：

HTML部分：

<div class="search-input">
	<input type="text" placeholder="写下备注">
</div>
复制代码

CSS部分：

.search-input {
    width: 718px;
    margin: 41px auto 0;
  }
  .search-input textarea {
    width: 718px;
    height: 148px;
    border: 1px solid #CCCCCC;
    border-radius: 100px;
    font-size: 18px;
    color: #333;
    line-height: 48px;
    text-indent: 48px;
    letter-spacing: -0.43px;
    outline: none;
    background: #FFFFFF url("../../icons/问题.svg") no-repeat 17px center;
  }
复制代码

这里还有一个重要的地方就是对提示文字大小，字体，颜色，缩进程度的设置，这里需要使用到的CSS样式为：（注意兼容）

::-webkit-input-placeholder { /* WebKit browsers */
    font-size: 18px;
    color: #CCCCCC;
    text-indent: 48px;
  }

  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    font-size: 18px;
    color: #CCCCCC;
    text-indent: 48px;
  }

  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    font-size: 18px;
    color: #CCCCCC;
    text-indent: 48px;
  }

  :-ms-input-placeholder { /* Internet Explorer 10+ */
    font-size: 18px;
    color: #CCCCCC;
    text-indent: 48px;
  }
复制代码

转载于:https://juejin.im/post/5b2bbb296fb9a00e3f1e49e1