开发项目中表单常用的清楚样式:
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表单样式的示例的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号