Example of how to clear form style in css

Commonly used clear styles for forms in development projects:

1. Change the default font color of placeholder

::-webkit-input-placeholder{color: #333;}
:-moz-placeholder{color: #333;}
:-moz-placeholder{color: #333;} 
:-ms-input-placeholder{color: #333;}

2. Cancel the up and down arrows of the input number

input::-webkit-outer-spin-button,input
::-webkit-inner-spin-button{-webkit-appearance: none !important;}input[type="number"]{-moz-appearance:textfield;}

3. select The drop-down selection box option text is right-aligned

direction: rtl;

4. Select the right arrow to hide

-webkit-appearance: none;

5. Clear the draggable function in the lower right corner of the textarea

resize:none;

6. The height of the textarea text box Adaptive

<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();

The code here needs to reference JQ, and the outermost .ta_box in the structure is to eliminate the slider and optimize the user experience.

The extension function of JQ is used here

The above is the detailed content of Example of how to clear form style in css. For more information, please follow other related articles on the PHP Chinese website!