Form 表单相关小技巧

佚名 7年前 (2019-04-17) 随笔 1380人围观抢沙发百度已收录

JS ---textarea 高度自适应

var realH = this.scrollHeight + 10+ "px";
$(this).css("height", realH);

---可以使 textarea 高度改变。注意，如果使用 datatable ，需放置在 fnDrawCallback 里 JS--按钮不可用

$.attr("disabled",true)

CSS--- 更改 file 的默认样式 伪元素改变 file 类型 input 框的默认样式

::-ms-browse, [type='file'] {
padding: .4em;
ling-height: 24px;
border: 1px solid #ccc;
background: #999;
color: #fff;
}
::-webkit-file-upload-button {
padding: .4em;
line-height: 30px;
border: 1px solid #ccc;
background: #999;
color: #fff;
}

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 设置 input 的 placeholder 默认样式


input:: input-placeholder { color: #aaa; }
input::-webkit-input-placeholder
input::-ms-input-placeholder
input::-moz-placeholder
input:focus::-webkit-input-placeholder
input:focus::-moz-placeholder
可以修改   color  ;  font-size;   text-align


设置 Input checkbox 默认样式


input[type="checkbox"],
input[type="radio"] {
    display: inline-block;
    box-sizing: border-box;
    height: 14px;
    width: 14px !important;
    min-height: 14px;
    line-height: 14px;
    padding: 0;
    text-align: center;
    vertical-align: middle;
    position: relative;
    border: none;
    outline: none;
    -webkit-appearance: none;
}

input[type="checkbox"]:before {
    display: inline-block;
    box-sizing: border-box;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid #999;
    background-color: #fff;
    border-radius: 3px;
    font-size: 12px;
    font-weight: bold;
}
input[type="checkbox"]:checked:before,
input[type="checkbox"].checked:before {
    content: '\2713';
    color: #fff;
    background-color: #4285f4;
    border-color: #4285f4;
}
	
cursor 禁用  
cursor: not-allowed