placeholder是html5<input>的一個屬性,它提供可描述輸入字段預期值的提示信息(hint), 該提示會在輸入字段為空時顯示。高端瀏覽器支持此屬性(ie10/11在獲得焦點時文字消失),ie6/7/8/9則不支持。為了兼容各主流瀏覽器并使其呈現效果保持一致,以下三套方案僅供參考。
方案一:
摒棄原始屬性placeholder,為input添加一個兄弟節點span,并為span設置絕對定位(父節點為position: relative;),使其位于input之上。html代碼片段如下:
- <li>
- <div class="inputMD" style="position: relative;">
- <input class="phInput" type="text" />
- <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">手機號碼/郵箱地址</span>
- </div>
- </li>
- <li>
- <div class="inputMD" style="position: relative;">
- <input class="phInput" type="password" />
- <span class="phText" style="clear: both; height: 33px; line-height: 33px; color: #aaa; position: absolute; left: 10px; top: 5px;">請輸入密碼</span>
- </div>
- </li>
|
新聞熱點
疑難解答
圖片精選