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的扩展函数
下载本文