相信我們平時開發的過程中,會遇到這種需求:
這裏是一個輸入框,裏面有提示文字的同時,還有一個小圖標。這裏我的做法是使用一個父元素包裹住文本框,利用父級元素的背景圖片來完成小圖標的實現。提示文字部分則使用文本框的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;
}