<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS Only Floated Labels</title> <!-- https://codepen.io/callmenick/pen/OxpKNZ --> <style type="text/css"> @import url("https://fonts.googleapis.com/css?family=Dosis"); :root { /* generic */ --gutterSm: 0.4rem; --gutterMd: 0.8rem; --gutterLg: 1.6rem; --gutterXl: 2.4rem; --gutterXx: 7.2rem; --colorPrimary400: #7e57c2; --colorPrimary600: #5e35b1; --colorPrimary800: #4527a0; --fontFamily: "Dosis", sans-serif; --fontSizeSm: 1.2rem; --fontSizeMd: 1.6rem; --fontSizeLg: 2.1rem; --fontSizeXl: 2.8rem; --fontSizeXx: 3.6rem; --lineHeightSm: 1.1; --lineHeightMd: 1.8; --transitionDuration: 300ms; --transitionTF: cubic-bezier(0.645, 0.045, 0.355, 1); /* floated labels */ --inputPaddingV: var(--gutterMd); --inputPaddingH: var(--gutterLg); --inputFontSize: var(--fontSizeLg); --inputLineHeight: var(--lineHeightMd); --labelScaleFactor: 0.8; --labelDefaultPosY: 50%; --labelTransformedPosY: calc( (var(--labelDefaultPosY)) - (var(--inputPaddingV) * var(--labelScaleFactor)) - (var(--inputFontSize) * var(--inputLineHeight)) ); --inputTransitionDuration: var(--transitionDuration); --inputTransitionTF: var(--transitionTF); } *, *::before, *::after { box-sizing: border-box; } html { font-size: 10px; } body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; width: 100vw; height: 100vh; color: #455A64; background-color: #7E57C2; font-family: var(--fontFamily); font-size: var(--fontSizeMd); line-height: var(--lineHeightMd); } .Wrapper { -webkit-box-flex: 0; -ms-flex: 0 0 80%; flex: 0 0 80%; max-width: 80%; } .Title { margin: 0 0 var(--gutterXx) 0; padding: 0; color: #fff; font-size: var(--fontSizeXx); font-weight: 400; line-height: var(--lineHeightSm); text-align: center; text-shadow: -0.1rem 0.1rem 0.2rem var(--colorPrimary800); } .Input { position: relative; } .Input-text { display: block; margin: 0; padding: var(--inputPaddingV) var(--inputPaddingH); color: inherit; width: 100%; font-family: inherit; font-size: var(--inputFontSize); font-weight: inherit; line-height: var(--inputLineHeight); border: none; border-radius: 0.4rem; -webkit-transition: box-shadow var(--transitionDuration); transition: box-shadow var(--transitionDuration); } .Input-text:focus { outline: none; box-shadow: 0.2rem 0.8rem 1.6rem var(--colorPrimary600); } .Input-label { display: block; position: absolute; bottom: 50%; left: 1rem; color: #311B92; font-family: inherit; font-size: var(--inputFontSize); font-weight: inherit; line-height: var(--inputLineHeight); opacity: 0; -webkit-transform: translate3d(0, var(--labelDefaultPosY), 0) scale(1); transform: translate3d(0, var(--labelDefaultPosY), 0) scale(1); -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF), visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF), z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF), -webkit-transform var(--inputTransitionDuration) var(--inputTransitionTF); transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF), visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF), z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF), -webkit-transform var(--inputTransitionDuration) var(--inputTransitionTF); transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF), transform var(--inputTransitionDuration) var(--inputTransitionTF), visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF), z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF); transition: opacity var(--inputTransitionDuration) var(--inputTransitionTF), transform var(--inputTransitionDuration) var(--inputTransitionTF), visibility 0ms var(--inputTransitionDuration) var(--inputTransitionTF), z-index 0ms var(--inputTransitionDuration) var(--inputTransitionTF), -webkit-transform var(--inputTransitionDuration) var(--inputTransitionTF); } .Input-text:placeholder-shown + .Input-label { visibility: hidden; z-index: -1; } .Input-text:not(:placeholder-shown) + .Input-label, .Input-text:focus:not(:placeholder-shown) + .Input-label { visibility: visible; z-index: 1; opacity: 1; -webkit-transform: translate3d(0, var(--labelTransformedPosY), 0) scale(var(--labelScaleFactor)); transform: translate3d(0, var(--labelTransformedPosY), 0) scale(var(--labelScaleFactor)); -webkit-transition: visibility 0ms, z-index 0ms, -webkit-transform var(--inputTransitionDuration); transition: visibility 0ms, z-index 0ms, -webkit-transform var(--inputTransitionDuration); transition: transform var(--inputTransitionDuration), visibility 0ms, z-index 0ms; transition: transform var(--inputTransitionDuration), visibility 0ms, z-index 0ms, -webkit-transform var(--inputTransitionDuration); } </style> </head> <body> <div class="Wrapper"> <h1 class="Title">CSS Only Floated Labels!</h1> <div class="Input"> <input type="text" id="input" class="Input-text" placeholder="Enter your name!"> <label for="input" class="Input-label">Name</label> </div> </div> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » CSS Only Floated Labels 喜欢 (0)or分享 (0)
