Created
June 9, 2022 04:20
-
-
Save relyky/e01d7c65f49f2bc592c3b6e5b3df9385 to your computer and use it in GitHub Desktop.
CSS, TextField, 以 Tailwind CSS 為基底實作 Material UI TextField。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Material UI Textfield</h3> | |
| 以 Tailwind CSS 為基底實作 Material UI TextField。<br/> | |
| ref→[Material UI Textfield - By wan54](https://tailwindcomponents.com/component/material-ui-textfield-1) | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| body { | |
| background-color: whitesmoke; | |
| } | |
| .container { | |
| width: 1024px; | |
| margin: auto; | |
| } | |
| .md-input-main { | |
| @apply font-sans text-xl w-full; | |
| /* width: 50%; */ | |
| font-size: 1.25rem; | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; | |
| } | |
| .md-input-box { | |
| @apply relative; | |
| position: relative; | |
| } | |
| .md-input { | |
| @apply w-full; | |
| width: 100%; | |
| outline: none; | |
| height: 50px; | |
| } | |
| .md-label { | |
| @apply absolute pointer-events-none block; | |
| display: block; | |
| position: absolute; | |
| pointer-events: none; | |
| transform-origin: top left; | |
| transform: translate(0, -40px) scale(1); | |
| transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; | |
| margin-left:.25em; | |
| } | |
| .md-label-focus { | |
| @apply text-blue; | |
| color: #3182ce; | |
| transform: translate(0, -65px) scale(0.75); | |
| transform-origin: top left; | |
| } | |
| .md-input-underline { | |
| border-bottom: 1px solid #718096;; | |
| } | |
| .md-input-underline:after { | |
| @apply absolute left-0 right-0 pointer-events-none; | |
| position: absolute; | |
| left: 0; | |
| right: 0; | |
| pointer-events: none; | |
| bottom: -0.05rem; | |
| content: ""; | |
| transition: transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms; | |
| transform: scaleX(0); | |
| border-bottom: 2px solid #805ad5; | |
| } | |
| .md-input:focus ~ .md-input-underline:after { | |
| transform: scaleX(1); | |
| } | |
| .md-input:focus + .md-label, | |
| .md-input:not(:placeholder-shown) + .md-label { | |
| @apply md-label-focus; | |
| color: #3182ce; | |
| transform: translate(4px, -65px) scale(0.75); | |
| transform-origin: top left; | |
| background-color: white; | |
| padding-right: .25em; | |
| } | |
| /* enable to leave border-bottom in modified color when the field is populated */ | |
| /* | |
| .md-input:not(:placeholder-shown) ~ .md-input-underline:after { | |
| transform: scaleX(1); | |
| } | |
| */ | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h3>Material UI Textfield</h3> | |
| <p>以 Tailwind CSS 為基底實作 Material UI TextField。<br/> | |
| 參考：<a href="https://tailwindcomponents.com/component/material-ui-textfield-1" target="_blank">Material UI Textfield <small>By wan54</small></a> | |
| </p> | |
| <div class="md-input-main"> | |
| <div class="md-input-box"> | |
| <input | |
| id="fullName" | |
| name="fullName" | |
| type="text" | |
| class="md-input" | |
| placeholder=" " | |
| /> | |
| <label for="fullName" class="md-label">Full Name</label> | |
| <div class="md-input-underline" /> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment