開發項目中表單常用的清楚樣式:
1、改變placeholder預設字型顏色
::-webkit-input-placeholder{color: #333;}:-moz-placeholder{color: #333;}:-moz-placeholder{color: #333;} :-ms-input-placeholder{color: #333;}
2、取消input number的上下箭頭
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance: none !important;}input[type="number"]{-moz-appearance:textfield;}
3、select下拉選擇框option文字靠右對齊
direction: rtl;
4、select右邊箭頭隱藏
-webkit-appearance: none;
5、清除textarea右下角可拖拽功能
resize:none;
6、textarea文字框高度自適應
<p class="ta_box"> <textarea class="ta"></textarea></p>
.ta_box{ width: 400px; height: auto; overflow: hidden; border: 1px solid #999; box-sizing: border-box;}.ta{ min-height: 30px; outline: none; resize: none; width: 500px; box-sizing: border-box; vertical-align: top; border: none;}
$.fn.autoHeight = function () { function autoHeight (elem) { elem.style.height = 'auto'; elem.scrollTop = 0; //防震 elem.style.height = elem.scrollHeight + 'px'; } this.each(function () { autoHeight(this); $(this).on('keyup',function () { autoHeight(this); }); });}$('textarea').autoHeight();
這裡的代碼需要引用JQ,而結構之中最外層的.ta_box是為了消除滑塊,最佳化使用者體驗.
這裡用到了JQ的擴充函數