CSS를 사용하여 간단하고 우아한 입력 상자를 만드는 방법을 단계별로 가르칩니다.

藏色散人

풀어 주다： 2023-01-13 15:55:49

앞으로

3504명이 탐색했습니다.

이 기사에서는 CSS를 사용하여 간단하고 정교한 입력 상자를 구현하는 방법을 주로 소개합니다. 함께 살펴보도록 하겠습니다. 필요하다면 친구의 도움을 받으세요.

간단한 비즈니스 로그인 인터페이스

며칠 전 코드펜을 탐색하던 중, 아주 흥미로운 로그인 인터페이스를 발견하고, 직접 구현해볼까 고민하다가 이 데모를 준비하게 되었습니다.
그런데 다음 웹사이트의 로그인 인터페이스도 이 스타일로 변경됩니다.

먼저 이전 렌더링:

CSS를 사용하여 간단하고 우아한 입력 상자를 만드는 방법을 단계별로 가르칩니다.

렌더링에는 두 개의 입력 상자가 있는 것을 볼 수 있습니다. 하나는 텍스트 입력 상자이고 다른 하나는 비밀번호 입력 상자입니다.
두 입력 상자의 스타일이 거의 동일하므로 첫 번째 입력 상자의 구현만 설명합니다.

1. 입력 상자 구조

사실 이 입력 상자는 두 부분으로 구성됩니다.
입력 상자의 프롬프트 내용과 입력 상자 본문입니다.

입력 상자의 프롬프트 내용을 label 태그에 넣고 for 속성을 label 태그에 추가합니다. 입력란의 id 속성 값입니다. label标签中，并且给label标签添加一个for属性，值为输入框的id属性值。

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

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

로그인 후 복사

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

2.输入框样式

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

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

로그인 후 복사

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

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

로그인 후 복사

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

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

#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);
}

로그인 후 복사

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

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

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

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

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

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

로그인 후 복사

这样输入框的样式就出来了：
CSS를 사용하여 간단하고 우아한 입력 상자를 만드는 방법을 단계별로 가르칩니다.

3.输入框提示语

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

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

로그인 후 복사

最后这整个输入框的样式就是这样：
CSS를 사용하여 간단하고 우아한 입력 상자를 만드는 방법을 단계별로 가르칩니다.

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

4.输入框交互

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

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

那么我们定义一个动画：

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

로그인 후 복사

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

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

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

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

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

로그인 후 복사

然后我们就可以通过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;);
    }
});

로그인 후 복사

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