css form表单样式清除
程序员文章站
2022-06-11 19:10:41
...
开发项目中表单常用的清楚样式:
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文本框高度自适应
<div class="ta_box">
<textarea class="ta"></textarea>
</div>
.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的扩展函数
推荐阅读
-
css3实现一款模仿iphone样式的注册表单
-
css3中检验表单的required,focus,valid和invalid样式
-
清除表单自带样式
-
css3实现一款模仿iphone样式的注册表单
-
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
-
修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标
-
css清除浏览器默认样式
-
form表单中的 action=./?> 是什么意思?谢谢_html/css_WEB-ITnose
-
form表单中的 action=./?> 是什么意思?谢谢_html/css_WEB-ITnose
-
symfony怎么用css来控制表单的样式?