Example of how CSS clears form form styles

Common clear styles for forms in development projects:

1. Change placeholder default font color

::-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 input number

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

3. Select drop-down selection box option text right align

Direction:rtl;

4. Select Right ARROW Hide

-webkit-appearance:none;

5, clear the lower right corner of the textarea can be dragged function

Resize:none;

6, TextArea text box height 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;  Anti-jitter        elem.style.height = elem.scrollheight + ' px ';    }    This.each (function () {        autoheight (this);        $ (this). On (' KeyUp ', function () {            autoheight (this);        });    } $ (' textarea '). Autoheight ();

The code here needs to refer to JQ, which is the outermost of the structure. Ta_box is designed to eliminate sliders and optimize the user experience.

The extended function of JQ is used here.