Skip to content

Instantly share code, notes, and snippets.

@relyky

relyky/TextFiled.input.html

Created June 9, 2022 04:20
Show Gist options
  • Save relyky/e01d7c65f49f2bc592c3b6e5b3df9385 to your computer and use it in GitHub Desktop.
Save relyky/e01d7c65f49f2bc592c3b6e5b3df9385 to your computer and use it in GitHub Desktop.
Download ZIP
CSS, TextField, 以 Tailwind CSS 為基底實作 Material UI TextField。
Raw
TextFiled.input.html
<!--
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