开发项目中表单常用的清楚样式：
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的扩展函数
以上就是css如何清除form表单样式的示例的详细内容。