Exemple de comment effacer le style de formulaire en CSS

Styles clairs couramment utilisés pour les formulaires dans les projets de développement :

1 Modifiez la couleur de police par défaut de l'espace réservé

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

2. Annulez les flèches haut et bas du numéro saisi

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

. 🎜>

direction: rtl;

3. Sélectionnez le texte de l'option de la zone de sélection déroulante aligné à droite

-webkit-appearance: none;

4. Sélectionnez la flèche droite pour masquer

resize:none;

5. la fonction glisser-déposer dans le coin inférieur droit de la zone de texte

<p class="ta_box">
    <textarea class="ta"></textarea></p>

6. Hauteur de la zone de texte de la zone de texte adaptative

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

Le code ici a besoin pour référencer JQ, et la .ta_box la plus externe de la structure consiste à éliminer le curseur Optimiser l'expérience utilisateur.

La fonction d'extension de JQ est utilisée ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!