CSS의 플로팅 라벨 소개(케이스 포함)

이 글은 CSS의 플로팅 라벨(예제 포함)을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

웹 프로젝트에는 로그인/등록 모듈이라는 매우 중요한 모듈이 있습니다. 이 모듈의 주요 부분은 양식입니다. 이 양식에는 두 개의 중요한 입력 그룹(사용자 이름/비밀번호)이 포함되어 있습니다. 라벨+입력에 대한 다양한 레이아웃 계획이 있습니다. 디자이너마다 디자인 스타일이 다르며 프런트엔드 엔지니어마다 구현 방법이 다릅니다. 비교를 통해 우리는 현재 솔루션이 미학과 성능 모두에 초점을 맞추고 있음을 발견했습니다.

그렇다면 라벨과 입력의 레이아웃 계획은 무엇인가요?

라벨+입력

1. 의 레이아웃 계획은 라벨과 입력(palcholder 키워드 프롬프트)을 위쪽과 아래쪽으로 나누었습니다. // 오랫동안 채택되었습니다. 이전에는 가끔

2. 을 사용하여 레이블과 입력(palcholder 키워드 힌트)을 왼쪽과 오른쪽 부분으로 나눕니다(레이블은 특정 너비를 차지하고 레이블의 글꼴은 왼쪽 정렬, 오른쪽 정렬의 세 가지 일반적인 방법을 채택합니다). -정렬, 양쪽 끝 정렬) 해결); // 사례: Weibo 로그인, jd wap 로그인 페이지 등

3. 라벨과 입력(palcholder 키워드 프롬프트)은 여전히 ​​왼쪽과 오른쪽 부분으로 나누어져 있습니다. 차이점은 라벨의 글꼴이 아이콘으로 대체됨 // 사례: 세그먼트 오류 커뮤니티 로그인 페이지 등

4. 입력만 포함(palcholder 키워드 프롬프트) // 사례: 모바일 Taobao 로그인 페이지, Nuggets 개발 커뮤니티 로그인 페이지 등

5. 입력(palcholder 키워드 힌트) Tip)만 표시하고, 입력의 포커스 이벤트가 트리거되면 레이블이 표시됩니다. // 사례: 모바일 타오바오의 이전 로그인 페이지나 JVFloatLabeledTextField 등을 참고하세요.

각 솔루션에는 장단점이 있습니다. 아이콘 대신 라벨 글꼴을 사용하는 것이 더 생생하지만, 아이콘의 URL 액세스; 라벨의 글꼴 숫자가 일치하지 않고 보기 흉하며 단어 수가 동일합니다. 이 솔루션은 라벨을 직접 삭제하면 인터페이스가 단순하고 아름답게 될 수 있습니다. 그러나 레이블에는 레이블 기능이 있습니다(레이블 및 자리 표시자의 기능은 아래에서 자세히 설명합니다). 부동 레이블을 사용하면 애니메이션 효과가 추가되지만 js가 없는 경우보다 이 솔루션의 성능이 더 높습니다. js를 사용하지 않는 솔루션도 있지만 호환성이 별로 좋지 않습니다.)

label 대 placholder

label: 양식 요소의 역할을 설명합니다.

placeholder: 사용자에게 콘텐츠 형식을 입력하라는 메시지를 표시합니다. 둘 다 비슷해 보이지만 각자의 책임이 다르기 때문에 많은 학생들이 여기서 비교적 큰 실수를 저질렀습니다.

자세한 내용은 MDN

label with animation(no-js)을 참조하세요.

사용자 상호작용 페이지를 만들 때 애니메이션을 이용한 사용자 상호작용이 사용자에게 깊은 인상을 주기 쉬운 경우가 많습니다. 다음은 의사 클래스를 사용하여 구현된 부동 레이블을 소개합니다.

HTML 코드:

<div class="input-group">
    <input type="text" id="userName" placeholder="用户名/邮箱/卡号">
    <label for="userName">账号</label>
</div>

기본 레이아웃 CSS 코드:

.input-group {
    position: relative;
    margin: 100px 20px;
    font-size: 16px;
}

.input-group>input {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 16px;
    font-size: 16px;
    line-height: 1.0;
    border: none;
    border-bottom: 1px solid #cdcdcd;
    border-radius: 0.4em;

    transition: box-shadow 0.3s;
}

.input-group input::placeholder {
  color: #cdcdcd;
}

.input-group>input:focus {
    outline: none;
    box-shadow: 0.2em 0.8em 1.6em #cdcdcd;
}

.input-group>label {
    position: absolute;
    bottom: 50%;
    left: 0;
    z-index: -1;
    
    visibility: hidden;
    color: #050505;
    opacity: 0;
}

먼저 라벨의 위치를 ​​설정하고(위치: 절대), 레벨을 정의하고(z-index: -1) 가시성(visibility) : 숨김 ), 투명도(불투명도: 0);

그런 다음 입력의 자리 표시자 스타일이 설정되고 의사 요소를 사용하여 해당 스타일을 설정할 수 있습니다::placeholder;

마지막으로 입력 시 전환 애니메이션 효과가 설정됩니다. 요소 레이블이 포커스를 얻음 pseudo-class:focus를 사용할 때 포커스를 얻을 때 입력 요소 레이블의 그림자 스타일(box-shadow)과 윤곽선 스타일(윤곽선)이 정의됩니다.

레이블 부동 효과 스타일

 .input-group>label {
      ...

      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      -webkit-transform: translate3d(0, 0, 0) scale(0);
              transform: translate3d(0, 0, 0) scale(0);
      -webkit-transition:
          opacity 0.3s,
          visibility 0.3s,
          transform 0.3s,
          z-index 0.3s;
          
              transition:
                  opacity 0.3s,
                  visibility 0.3s,
                  transform 0.3s,
                  z-index 0.3s;
 }

.input-group>input:focus ~ label {
    z-index: 1;
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate3d(0, -36px, 0) scale(1);
        transform: translate3d(0, -36px, 0) scale(1);
}

레이블 스타일을 정의하는 컬렉션에서 초기 변형 변형 효과를 추가하고 전환 전환 효과 스타일을 설정한 다음 입력에 포커스가 있을 때 형제 요소 레이블의 스타일을 정의합니다.

이 라벨 플로팅의 효과는 JVFloatLabeledTextField의 효과와 다릅니다. 전자는 포커스를 받고 라벨이 즉시 플로팅되기 시작하는 반면, 후자는 사용자가 콘텐츠를 입력할 때(즉, 자리 표시자가 사라질 때) 시작됩니다.

두 가지가 동일한 효과를 가지게 하려면 의사 클래스를 중첩할 수 있는 기능을 사용하고 .input-group>input:focus ~ 라벨을 .input-group>input:focus:not(:placeholder-로 수정하면 됩니다. 표시) ~ 라벨, 여기: placeholder-shown은 자리 표시자의 표시 및 숨김 효과를 정의할 수 있지만 호환성이 그다지 좋지 않습니다. IE/edge에서는 전혀 지원하지 않으며 Chrome, Safari 및 Firefox에서는 지원합니다. 사례:

데모

위 내용은 CSS의 플로팅 라벨 소개(케이스 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!