文本框裏如何帶上圖標和文字提示

相信我們平時開發的過程中，會遇到這種需求：

這裏是一個輸入框，裏面有提示文字的同時，還有一個小圖標。這裏我的做法是使用一個父元素包裹住文本框，利用父級元素的背景圖片來完成小圖標的實現。提示文字部分則使用文本框的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;
  }