순풍 CSS가 있는 부동 양식 필드
15054 단어 tailwindcsswebdevcss
새로운 프로젝트에서 따라갈 수도 있고 GitHub에서 얻을 수도 있다source code.
설치 프로그램
빈 디렉터리부터
package.json
를 사용하여 기본 npm init -y
파일을 설정합니다.순풍 CSS 설정
설치Tailwind
npm i -D tailwindcss postcss-cli autoprefixer
순풍 프로필을 생성하고 나중에 부동 폼 필드 customize 순풍을 생성합니다.npx tailwindcss init
postcss.config.js
파일을 만들려면 플러그인tailwindcss
및 autoprefixer
이 필요합니다.module.exports = {
plugins: [
require("tailwindcss"),
require("autoprefixer")
]
};
css/tailwind.css
에서 순풍 스타일 만들기@tailwind base;
@tailwind components;
@tailwind utilities;
이 스크립트를 package.json
에 추가하면 하나는 생성에 사용되고, 다른 하나는 tailwind.css
파일에 대한 변경 사항을 볼 수 있습니다."scripts": {
"build": "postcss css/tailwind.css -o public/build/tailwind.css",
"dev": "postcss css/tailwind.css -o public/build/tailwind.css -w"
},
HTML 설정
다음 간단한 HTML 레이아웃부터 시작하여 공통 디렉토리에 생성합니다
index.html
.<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>FFFwT</title>
<link rel="stylesheet" href="build/tailwind.css" />
</head>
<body class="antialiased p-10">
<form>
<div>
<input type="text" name="username" placeholder=" " />
<label for="username">Username</label>
</div>
</form>
</body>
</html>
live-server 를 사용하여 실시간으로 다시 불러오는 dev 서버를 시작할 수 있습니다.live-server public
이것은 당신의 출발점입니다. 입력과 라벨입니다.부동 폼 필드를 만들기 위해 스타일을 추가합니다.
부동 양식 필드
초점 테두리
먼저
div
를 사용하여 아래쪽 테두리를 border-b-{width}
에 추가합니다.<div class="border-b-2">
<input type="text" name="username" placeholder=" " />
<label for="username">Username</label>
</div>
입력에 초점을 맞출 때 테두리 색을 변경하려면 위조 클래스
focus-within
를 사용하십시오.변체 섹션 아래borderColor
에 추가하여 tailwind.config.js
순풍에 사용focus-within variant:variants: {
borderColor: ['responsive', 'hover', 'focus', 'focus-within'],
},
초점의 테두리 색상을 변경하려면 focus-within:border-blue-500
추가<div class="my-4 border-b-2 focus-within:border-blue-500">
<input type="text" name="username" placeholder=" " />
<label for="username">Username</label>
</div>
부동 레이블
먼저
div
의 위치를 relative
로 변경하여 top
제어 label
의 위치를 사용할 수 있도록 합니다.class="absolute top-0"
에 추가합니다.label
는 블록 요소로 변경하기 위해 Tailwindinput
클래스를 추가하는 내연 요소입니다.또한 block
입력 폭을 100%로 설정하여 전체 폼 필드의 입력을 클릭할 수 있습니다.또한 브라우저의 특정 스타일을 삭제하기 위해 입력에 w-full
및 appearance-none
을 추가합니다.<div class="relative my-4 border-b-2 focus-within:border-blue-500">
<input type="text" name="username" placeholder=" " class="block w-full appearance-none focus:outline-none" />
<label for="username" class="absolute top-0">Username</label>
</div>
현재 탭이 입력 필드를 덮어쓰므로 입력에 초점을 맞추지 못합니다🙈.레이블의
focus:outline-none
을 z-index
로 설정하고 입력 필드 뒤에 있는 것으로 변경합니다.'순풍'테마를 확장하여 마이너스 z 지수를 생성합니다.theme: {
extend: {
zIndex: {
"-1": "-1",
},
},
}
태그에 클래스z-index: -1
를 추가하면 태그가 더 이상 보이지 않습니다.-z-1
에 추가합니다.<div class="relative my-4 border-b-2 focus-within:border-blue-500">
<input type="text" name="username" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
<label for="username" class="absolute top-0 -z-1">Username</label>
</div>
탭이 다시 표시되거나 탭을 붙여서 입력 필드에 초점을 맞출 수 있습니다🐵.다음에 위류
bg-transparent
를 다시 사용하여 라벨을 입력 위에 띄웁니다.input
를 열고 다음 CSS 선택기를 추가합니다.input:focus-within ~ label {
}
이제 Tailwind@apply를 사용하여 입력 포커스에서 태그 텍스트 색상을 변경, 축소 및 변경합니다.input:focus-within ~ label {
@apply transform scale-75 -translate-y-6 text-blue-500;
}
라벨 변환 지속 시간을 제어하기 위해 focus-within
을 label 클래스에 추가합니다.너무 좋아요. 라벨이 떠요.🎈, 그러나 입력에서 포커스를 제거하면 부동이 중지됩니다.😞. 입력 필드에 내용이 있으면 탭이 부동해야 합니다.
tailwind.css
을(를) 대상으로 하고 표시되지 않는 경우duration-300
내용을 입력하면 태그가 부동해야 합니다.input:focus-within ~ label,
input:not(:placeholder-shown) ~ label {
@apply transform scale-75 -translate-y-6;
}
input:focus-within ~ label {
@apply text-blue-500;
}
그래🤩, 내용을 입력하면 레이블이 초점에 떠 있습니다.태그가 입력 필드와 일치하지 않는 것 같습니다.레이블의
placeholder
을 0%로 설정합니다.Tailwind를 생성하고 열고input:not(:placeholder-shown) ~ label
테마 섹션에 추가합니다.theme: {
extend: {
transformOrigin: {
"0": "0%",
},
zIndex: {
"-1": "-1",
},
},
}
태그에 transform-origin
를 추가합니다. 마지막으로 Tailwind CSS를 사용하여 부동 양식 필드를 만들 수 있습니다.😍🚀구축 양식
부동 폼 필드를 복사하거나 @apply 추출 스타일을 사용하여 폼 필드를 구축합니다.
양식에
tailwind.config.js
을 추가하여 입력 필드 사이에 여백을 추가합니다.너도 카드로 그것을 싸도 된다. <form class="max-w-sm mx-auto rounded-lg shadow-xl overflow-hidden p-6 space-y-10">
<h2 class="text-2xl font-bold text-center">Login</h2>
<div class="relative border-b-2 focus-within:border-blue-500">
<input type="text" name="username" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
<label for="username" class="absolute top-0 -z-1 duration-300 origin-0">Username</label>
</div>
<div class="relative border-b-2 focus-within:border-blue-500">
<input type="text" name="email" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
<label for="email" class="absolute top-0 -z-1 duration-300 origin-0">Email</label>
</div>
<div class="relative border-b-2 focus-within:border-blue-500">
<input type="password" name="password" placeholder=" " class="block w-full appearance-none focus:outline-none bg-transparent" />
<label for="password" class="absolute top-0 -z-1 duration-300 origin-0">Password</label>
</div>
</form>
이것은 부동 폼 필드를 사용하는 첫 번째 폼입니다.그런 다음 다른 스타일 - 아웃라인 양식 필드를 시도합니다.
개요 양식 필드
이 스타일에서 폼 필드 주위에 윤곽이 있고 라벨이 윤곽으로 떠다닌다.부동 양식 필드를 다시 사용하고
origin-0
를 space-y-{size}
로 변경하면 대강을 제공합니다.채우기
border-b-2
를 추가하여 아웃라인에 공간을 만들고 입력 및 레이블의 글꼴 크기border-2
를 늘립니다.<div class="relative border-2 focus-within:border-blue-500">
<input type="text" name="username" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
<label for="username" class="absolute top-0 p-4 text-lg -z-1 duration-300 origin-0">Username</label>
</div>
개요 양식 필드 보기입력에 초점을 맞추면 라벨이 윤곽을 덮어쓰지 않았다는 것을 알 수 있습니다.
태그를 아웃라인을 덮어쓰려면 아웃라인 양식 필드에 적용되는 부동 CSS를 사용자 정의합니다.
p-4
에서 사용자 정의 CSS를 복사하고 text-lg
클래스를 두 선택기에 추가합니다.입력 및 레이블 주위tailwind.css
에 클래스.outline
를 추가합니다..outline input:focus-within ~ label,
.outline input:not(:placeholder-shown) ~ label {
@apply transform scale-75 -translate-y-6;
}
레이블의 일부 스타일을 업데이트하여 위쪽 및 아래쪽 채우기를 제거합니다 - outline
.동시에 좌우 채우기를 div
로 줄이고 왼쪽 여백 py-0
을 추가하여 입력에 맞게 정렬합니다.z 인덱스를 px-1
로 재설정하여 레이블을 아웃라인 위에 배치합니다.마지막으로 레이블이 컨투어와 완전히 일치할 때까지 변환 y 값을 줄입니다..outline input:focus-within ~ label,
.outline input:not(:placeholder-shown) ~ label {
@apply transform scale-75 -translate-y-4 z-0 ml-3 px-1 py-0;
}
완벽한 라벨은 완전히 윤곽에 있지만 선은 여전히 보인다.윤곽을 숨기려면 탭의 배경을 양식 필드를 배치한 컨테이너의 동일한 배경으로 설정합니다.태그에
ml-3
를 추가하면 됩니다.<div class="outline relative border-2 focus-within:border-blue-500">
<input type="text" name="username" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
<label for="username" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Username</label>
</div>
현재, 대강 표 필드도 일하고 있다.👍구축 양식
이제 윤곽 스타일을 사용하여 폼을 만듭니다.
<form class="max-w-sm mx-auto rounded-lg shadow-xl overflow-hidden p-6 space-y-10">
<h2 class="text-2xl font-bold text-center">Login</h2>
<div class="outline relative border-2 focus-within:border-blue-500">
<input type="text" name="username" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
<label for="username" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Username</label>
</div>
<div class="outline relative border-2 focus-within:border-blue-500">
<input type="email" name="email" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
<label for="email" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Email</label>
</div>
<div class="outline relative border-2 focus-within:border-blue-500">
<input type="password" name="password" placeholder=" " class="block p-4 w-full text-lg appearance-none focus:outline-none bg-transparent" />
<label for="password" class="absolute top-0 text-lg bg-white p-4 -z-1 duration-300 origin-0">Password</label>
</div>
</form>
따라다니면 순풍 CSS가 있는 부동 폼 필드를 만들고 사용자 정의합니다.트위터에 너의 디자인을 나에게 보내라.
Reference
이 문제에 관하여(순풍 CSS가 있는 부동 양식 필드), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/notiz_dev/floating-form-field-with-tailwind-css-47n3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)