Apprenez étape par étape à utiliser CSS pour créer une zone de saisie simple et élégante

藏色散人

Libérer： 2023-01-13 15:55:49

avant

3515 Les gens l'ont consulté

Cet article vous apporte des connaissances pertinentes sur CSS. Il présente principalement comment utiliser CSS pour implémenter une zone de saisie simple et sophistiquée. Je vais y jeter un coup d'œil ensemble. si vous en avez besoin. Aidez vos amis.

Une interface de connexion professionnelle simple

Lorsque je parcourais codepen il y a quelques jours, j'ai trouvé une interface de connexion très intéressante, j'ai donc pensé à l'implémenter moi-même, j'ai donc imaginé cette démo.
À propos, l’interface de connexion du prochain site Web sera également modifiée dans ce style.

D'abord le rendu précédent :

Apprenez étape par étape à utiliser CSS pour créer une zone de saisie simple et élégante

Dans le rendu, nous voyons qu'il y a deux zones de saisie, l'une est une zone de saisie de texte et l'autre est une zone de saisie de mot de passe.
Étant donné que les styles des deux zones de saisie sont à peu près les mêmes, nous décrivons uniquement la mise en œuvre de la première zone de saisie.

1. Structure de la zone de saisie

En fait, cette zone de saisie se compose de deux parties :
qui sont le contenu rapide de la zone de saisie et le corps de la zone de saisie.

Nous plaçons le contenu de l'invite de la zone de saisie dans la balise label et ajoutons un attribut for à la balise label, avec la valeur de la valeur de l'attribut id de la zone de saisie. label标签中，并且给label标签添加一个for属性，值为输入框的id属性值。

这样用户在点击提示语句时，光标会自动聚焦到输入框中。

    <div class="user_name">
        <label for="userName" class="userNameTip">请输入您的用户名</label>
        <input type="text" id="userName">
    </div>

Copier après la connexion

到此为止，我们输入框的结构就搭建好了。

2.输入框样式

我们先给整个大盒子添加一个相对定位，方便后续我们对里面元素的位置调整。顺便设置一个整个盒子的大小。

    .user_name {
        position: relative;
        width: 400px;
        height: 200px;
    }

Copier après la connexion

接下来我们就给输入框改变一个样式，毕竟这样一个默认的框框实在太难看了。

.user_name{        
    width: 200px;        
    height: 50px;        
    position: absolute;        
    top: 50px;
    left: 30px;        
    font-size: 20px;
    }

Copier après la connexion

这里我们首先给整个输入框的整体调整一个位置，然后设置一个字体大小，这样我们的输入框就有了一个基本的样式。

下面就开始设置输入框的样式：

#userName{    
display: inline-block;    
width: 300px;    
height: 30px;    
color: #0FF;    
font-size: 20px;    
border: 0px transparent;    
border-bottom: 2px solid #fff;    
background-color: rgb(54, 54, 54);
}

Copier après la connexion

在这里我们设置了输入框的宽度，高度，字体颜色，字体大小，边框，背景颜色。

因为我此时整个大背景颜色为rgb(54, 54, 54),为了不让这个输入框这么突出没所以我设置了输入框的背景颜色与大背景颜色为一样的颜色。

但是这样还不够，因为在输入框获得焦点的时候，输入框外边还有一个边框，这样会使得输入框很丑。

通过outline属性我们可以设置输入框获得焦点时的边框样式。
在效果图中，我们可以看见输入框获得焦点时，输入框下边有一个蓝色的边框，这个边框的宽度为2px，颜色为#0FF。

我们我们这样给输入框来一个样式：

#userName:focus{    
outline: none;    
border-bottom: 2px solid #0FF;
}

Copier après la connexion

这样输入框的样式就出来了：
Apprenez étape par étape à utiliser CSS pour créer une zone de saisie simple et élégante

3.输入框提示语

在效果图里面输入框还未获得焦点的时候，提示语句在输入框里面的，这个就是我们使用绝对定位来实现的，调整到合适的位置，将提示语句放在输入框里面。
并且此时文字的颜色为白色。

.userNameTip{    
position: absolute;    
top: 0px;    
left: 0px;    
font-size: 20px;    
color: #fff;
}

Copier après la connexion

最后这整个输入框的样式就是这样：
Apprenez étape par étape à utiliser CSS pour créer une zone de saisie simple et élégante

当然现在这是一个静态的输入框，没有任何的交互，我们接下来就来实现这个输入框的交互。

4.输入框交互

交互肯定需要一个动画来实现，这里我们发现在输入框获得焦点之后，提示文字会变小，颜色也会随之改变，然后移动到输入框的上方，这个就是我们需要实现的效果。

失去焦点之后,我们就会判断，这个输入框里面是否有内容：
如果有内容的话，动画就不移除，一直保持动画的结束状态；如果没有内容，就移除动画回到初识状态。

那么我们定义一个动画：

@keyframes user {    
from{        
top: 0px;        
font-size: 20px;
    }    
    to{        
    top: -20px;        
    font-size: 12px;        
    color: #0FF;
    }
}

Copier après la connexion

现在有一个问题，我们点击输入框，最后将这个动画添加到输入框的提示语句上，那么我们如何将动画添加上去呢？

我这里使用的jquery中对class的操作来实现，也就是利用jQuery中的addClass()和removeClass()方法来实现。

那么在此之前，我们就需要先将动画写进一个类里面，然后通过jQuery来操作这个类。

我这里简单的写了一个class，然后将动画写进去：

.userNameTipA{    
animation: user 0.3s linear normal forwards;    
animation-iteration-count: 1;
}

Copier après la connexion

然后我们就可以通过jQuery来操作这个类了：

$(&#39;#userName&#39;).focus(function () {
    $(&#39;.userNameTip&#39;).addClass(&#39;userNameTipA&#39;);    
    console.log("点击了");
})
$(&#39;#userName&#39;).blur(function () {    
let val = $(&#39;#userName&#39;).val();    
if (val) {        
return;
    } else {
        $(&#39;.userNameTip&#39;).removeClass(&#39;userNameTipA&#39;);
    }
});

Copier après la connexion

最后点击保存，运行，就可以看到效果了。

总结

其实这个demo还是很简单的，就是利用一些定位来调整输入框的位置，然后针对输入框的聚焦样式和失焦样式来实现动画，最后通过jQuery

De cette façon, lorsque l'utilisateur clique sur l'instruction d'invite, le curseur se concentrera automatiquement sur la zone de saisie.

rrreeeÀ ce stade, la structure de notre zone de saisie est mise en place.

2. Style de zone de saisie
Nous ajoutons d'abord un positionnement relatif à l'ensemble de la grande boîte pour faciliter l'ajustement ultérieur de la position des éléments à l'intérieur. À propos, définissez la taille de la boîte entière.

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!

Apprenez étape par étape à utiliser CSS pour créer une zone de saisie simple et élégante

Une interface de connexion professionnelle simple

1. Structure de la zone de saisie

2.输入框样式

3.输入框提示语

4.输入框交互

总结

2. Style de zone de saisieNous ajoutons d'abord un positionnement relatif à l'ensemble de la grande boîte pour faciliter l'ajustement ultérieur de la position des éléments à l'intérieur. À propos, définissez la taille de la boîte entière.

2. Style de zone de saisie
Nous ajoutons d'abord un positionnement relatif à l'ensemble de la grande boîte pour faciliter l'ajustement ultérieur de la position des éléments à l'intérieur. À propos, définissez la taille de la boîte entière.