https://codepen.io/chaofix/pen/kkWZbj <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <title>输入框样式</title> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,600); @-webkit-keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 55% { opacity: 0; } 100% { opacity: 1; } } @keyframes blink { 0% { opacity: 0; } 50% { opacity: 1; } 55% { opacity: 0; } 100% { opacity: 1; } } * { background-repeat: no-repeat; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: 'Source Sans Pro', sans-serif; outline: 0; } *:before, *:after { background-repeat: no-repeat; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; } html, body { height: 100%; } body { background-color: #f2f2f2; font-family: 'Source Sans Pro', sans-serif; color: #2e4048; margin: 10px; } .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .box { -webkit-box-flex: 0; -ms-flex: 0 0 50%; flex: 0 0 50%; padding: 0 10px; } h1 { font-weight: 400; margin-bottom: 10px; } .st-form__input--wrapper { height: 40px; margin-bottom: 20px; position: relative; width: 100%; } .st-form__input--wrapper input[type="text"] { height: 100%; width: 100%; background-color: white; border: solid 1px #d4d4d4; font-weight: 400; padding: 0 10px; position: relative; z-index: 10; } .st-form__input--wrapper input[type="text"]:focus { background-color: transparent; border-color: transparent; } .st-form__input--wrapper input[type="text"]:focus ~ .input-border { background-color: white; } .st-form__input--wrapper .input-border { bottom: 0; display: block; left: 0; position: absolute; top: 0; width: 0; } .st-form__input--wrapper .input-border:before, .st-form__input--wrapper .input-border:after { bottom: 0; content: ''; display: block; position: absolute; top: 0; width: 0; -webkit-transition: 0.3s ease-in-out all; transition: 0.3s ease-in-out all; } .st-form__input--wrapper .input-border:after { display: none; } .st-form__input--wrapper.from-left input[type="text"]:focus ~ .input-border { width: 100%; } .st-form__input--wrapper.from-left input[type="text"]:focus ~ .input-border:before, .st-form__input--wrapper.from-left input[type="text"]:focus ~ .input-border:after { width: 100%; } .st-form__input--wrapper.from-left .input-border:before { -webkit-box-shadow: inset 0 0 0 2px #01afd1; box-shadow: inset 0 0 0 2px #01afd1; left: 0; } .st-form__input--wrapper.from-right input[type="text"]:focus ~ .input-border { width: 100%; } .st-form__input--wrapper.from-right input[type="text"]:focus ~ .input-border:before, .st-form__input--wrapper.from-right input[type="text"]:focus ~ .input-border:after { width: 100%; } .st-form__input--wrapper.from-right .input-border:before { -webkit-box-shadow: inset 0 0 0 2px #01afd1; box-shadow: inset 0 0 0 2px #01afd1; right: 0; } .st-form__input--wrapper.from-top input[type="text"]:focus ~ .input-border { width: 100%; } .st-form__input--wrapper.from-top input[type="text"]:focus ~ .input-border:before, .st-form__input--wrapper.from-top input[type="text"]:focus ~ .input-border:after { height: 100%; } .st-form__input--wrapper.from-top .input-border:before { -webkit-box-shadow: inset 0 0 0 2px #01afd1; box-shadow: inset 0 0 0 2px #01afd1; height: 0; width: 100%; } .st-form__input--wrapper.from-bottom input[type="text"]:focus ~ .input-border { width: 100%; } .st-form__input--wrapper.from-bottom input[type="text"]:focus ~ .input-border:before, .st-form__input--wrapper.from-bottom input[type="text"]:focus ~ .input-border:after { height: 100%; } .st-form__input--wrapper.from-bottom .input-border:before { -webkit-box-shadow: inset 0 0 0 2px #01afd1; box-shadow: inset 0 0 0 2px #01afd1; top: auto; height: 0; width: 100%; } .st-form__input--wrapper.from-side input[type="text"]:focus ~ .input-border { opacity: 1; width: 100%; } .st-form__input--wrapper.from-side input[type="text"]:focus ~ .input-border:before, .st-form__input--wrapper.from-side input[type="text"]:focus ~ .input-border:after { width: 50%; } .st-form__input--wrapper.from-side .input-border { opacity: 0; } .st-form__input--wrapper.from-side .input-border:before, .st-form__input--wrapper.from-side .input-border:after { -webkit-box-shadow: none; box-shadow: none; bottom: 0; content: ''; display: block; position: absolute; top: 0; width: 0; -webkit-transition: 0.3s ease-in-out all; transition: 0.3s ease-in-out all; } .st-form__input--wrapper.from-side .input-border:before { border: solid 2px #01afd1; border-right: 0; left: 0; } .st-form__input--wrapper.from-side .input-border:after { border: solid 2px #01afd1; border-left: 0; right: 0; } .st-form__input--wrapper.from-center input[type="text"]:focus ~ .input-border { opacity: 1; width: 100%; } .st-form__input--wrapper.from-center input[type="text"]:focus ~ .input-border:before, .st-form__input--wrapper.from-center input[type="text"]:focus ~ .input-border:after { width: 50%; } .st-form__input--wrapper.from-center .input-border { opacity: 0; } .st-form__input--wrapper.from-center .input-border:before, .st-form__input--wrapper.from-center .input-border:after { -webkit-box-shadow: none; box-shadow: none; bottom: 0; content: ''; display: block; position: absolute; top: 0; width: 0; -webkit-transition: 0.3s ease-in-out all; transition: 0.3s ease-in-out all; } .st-form__input--wrapper.from-center .input-border:before { border: solid 2px #01afd1; border-left: 0; left: 50%; } .st-form__input--wrapper.from-center .input-border:after { border: solid 2px #01afd1; border-right: 0; right: 50%; } .st-form__input--wrapper.from-middle input[type="text"]:focus ~ .input-border { opacity: 1; height: 100%; width: 100%; } .st-form__input--wrapper.from-middle input[type="text"]:focus ~ .input-border:before, .st-form__input--wrapper.from-middle input[type="text"]:focus ~ .input-border:after { height: 100%; opacity: 1; width: 50%; } .st-form__input--wrapper.from-middle .input-border { height: 0; opacity: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; } .st-form__input--wrapper.from-middle .input-border:before, .st-form__input--wrapper.from-middle .input-border:after { -webkit-box-shadow: none; box-shadow: none; bottom: 0; content: ''; display: block; height: 0; position: absolute; opacity: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0; -webkit-transition: 0.3s ease-in-out all; transition: 0.3s ease-in-out all; } .st-form__input--wrapper.from-middle .input-border:before { border: solid 2px #01afd1; border-left: 0; left: 50%; } .st-form__input--wrapper.from-middle .input-border:after { border: solid 2px #01afd1; border-right: 0; right: 50%; } .st-form__input--wrapper.blink input[type="text"]:focus ~ .input-border { -webkit-animation: blink 0.3s forwards 1 alternate; animation: blink 0.3s forwards 1 alternate; width: 100%; } .st-form__input--wrapper.blink input[type="text"]:focus ~ .input-border:before, .st-form__input--wrapper.blink input[type="text"]:focus ~ .input-border:after { width: 100%; } .st-form__input--wrapper.blink .input-border { opacity: 0; } .st-form__input--wrapper.blink .input-border:before, .st-form__input--wrapper.blink .input-border:after { -webkit-box-shadow: none; box-shadow: none; bottom: 0; content: ''; display: block; position: absolute; top: 0; width: 100%; } .st-form__input--wrapper.blink .input-border:before { border: solid 2px #01afd1; width: 100%; } .st-form__input--wrapper.blink .input-border:after { display: none; } .st-form__input--wrapper.half input[type="text"]:focus ~ .input-border { opacity: 1; width: 100%; } .st-form__input--wrapper.half input[type="text"]:focus ~ .input-border:before, .st-form__input--wrapper.half input[type="text"]:focus ~ .input-border:after { width: 100%; } .st-form__input--wrapper.half .input-border { opacity: 0; } .st-form__input--wrapper.half .input-border:before, .st-form__input--wrapper.half .input-border:after { -webkit-box-shadow: none; box-shadow: none; bottom: 0; content: ''; display: block; position: absolute; top: 0; width: 0; -webkit-transition: 0.6s ease-in-out all; transition: 0.6s ease-in-out all; } .st-form__input--wrapper.half .input-border:before { border-left: solid 2px #01afd1; border-top: solid 2px #01afd1; left: 0%; } .st-form__input--wrapper.half .input-border:after { border-right: solid 2px #01afd1; border-bottom: solid 2px #01afd1; right: 0%; } .st-form__input--wrapper.circle input[type="text"]:focus ~ .input-border:first-of-type:before { -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; -webkit-transition-delay: 0s; transition-delay: 0s; width: 100%; } .st-form__input--wrapper.circle input[type="text"]:focus ~ .input-border:first-of-type:after { height: 100%; -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; } .st-form__input--wrapper.circle input[type="text"]:focus ~ .input-border:last-of-type { background: transparent; } .st-form__input--wrapper.circle input[type="text"]:focus ~ .input-border:last-of-type:before { -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; width: 100%; } .st-form__input--wrapper.circle input[type="text"]:focus ~ .input-border:last-of-type:after { height: 100%; -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; -webkit-transition-delay: 0.45s; transition-delay: 0.45s; top: 0; } .st-form__input--wrapper.circle .input-border { bottom: auto; height: 100%; width: 100%; } .st-form__input--wrapper.circle .input-border:before, .st-form__input--wrapper.circle .input-border:after { background-color: #01afd1; content: ''; display: block; position: absolute; } .st-form__input--wrapper.circle .input-border:first-of-type:before { height: 2px; left: 0; top: 0; width: 0; } .st-form__input--wrapper.circle .input-border:first-of-type:after { height: 0; right: 0; top: 0; width: 2px; } .st-form__input--wrapper.circle .input-border:last-of-type:before { background-color: #01afd1; height: 2px; top: calc(100% - 2px); right: 0; width: 0; } .st-form__input--wrapper.circle .input-border:last-of-type:after { background-color: #01afd1; height: 0; top: calc(100% - 2px); left: 0; width: 2px; } .st-form__input--wrapper.just-bottom input[type="text"]:focus ~ .input-border { opacity: 1; width: 100%; } .st-form__input--wrapper.just-bottom input[type="text"]:focus ~ .input-border:before, .st-form__input--wrapper.just-bottom input[type="text"]:focus ~ .input-border:after { width: 50%; } .st-form__input--wrapper.just-bottom .input-border { opacity: 0; } .st-form__input--wrapper.just-bottom .input-border:before, .st-form__input--wrapper.just-bottom .input-border:after { -webkit-box-shadow: none; box-shadow: none; bottom: 0; content: ''; display: block; position: absolute; top: 0; width: 0; -webkit-transition: 0.3s ease-in-out all; transition: 0.3s ease-in-out all; } .st-form__input--wrapper.just-bottom .input-border:before { border-bottom: solid 2px #01afd1; left: 50%; } .st-form__input--wrapper.just-bottom .input-border:after { border-bottom: solid 2px #01afd1; right: 50%; } .st-form__input--wrapper.top-bottom input[type="text"]:focus ~ .input-border { opacity: 1; width: 100%; } .st-form__input--wrapper.top-bottom input[type="text"]:focus ~ .input-border:before, .st-form__input--wrapper.top-bottom input[type="text"]:focus ~ .input-border:after { width: 50%; } .st-form__input--wrapper.top-bottom .input-border { opacity: 0; } .st-form__input--wrapper.top-bottom .input-border:before, .st-form__input--wrapper.top-bottom .input-border:after { -webkit-box-shadow: none; box-shadow: none; bottom: 0; content: ''; display: block; position: absolute; top: 0; width: 0; -webkit-transition: 0.3s ease-in-out all; transition: 0.3s ease-in-out all; } .st-form__input--wrapper.top-bottom .input-border:before { border-bottom: solid 2px #01afd1; border-top: solid 2px #01afd1; border-right: solid 1px white; left: 50%; } .st-form__input--wrapper.top-bottom .input-border:after { border-bottom: solid 2px #01afd1; border-top: solid 2px #01afd1; border-left: solid 1px white; right: 50%; } .st-form__input--wrapper.partially input[type="text"]:focus ~ .input-border:first-of-type { border-left: solid 2px #01afd1; } .st-form__input--wrapper.partially input[type="text"]:focus ~ .input-border:last-of-type { background: transparent; border-right: solid 2px #01afd1; } .st-form__input--wrapper.partially input[type="text"]:focus ~ .input-border:before, .st-form__input--wrapper.partially input[type="text"]:focus ~ .input-border:after { height: 2px; width: 4.1666666667%; } .st-form__input--wrapper.partially .input-border { bottom: auto; height: 100%; width: 100%; } .st-form__input--wrapper.partially .input-border:before, .st-form__input--wrapper.partially .input-border:after { background-color: #01afd1; content: ''; display: block; position: absolute; } .st-form__input--wrapper.partially .input-border:before { top: 0; } .st-form__input--wrapper.partially .input-border:after { bottom: 0; top: auto; } .st-form__input--wrapper.partially .input-border:first-of-type { left: 0; } .st-form__input--wrapper.partially .input-border:first-of-type:before, .st-form__input--wrapper.partially .input-border:first-of-type:after { left: 0; } .st-form__input--wrapper.partially .input-border:last-of-type { right: 0; } .st-form__input--wrapper.partially .input-border:last-of-type:before, .st-form__input--wrapper.partially .input-border:last-of-type:after { right: 0; } .st-form__input--wrapper.enlarge input[type="text"]:focus { background-color: white; border-color: #01afd1; border-width: 2px; -webkit-transition: 0.15s ease-in-out all; transition: 0.15s ease-in-out all; } .st-form__input--wrapper.enlarge .input-border { display: none; } </style> </head> <body> <section class="wrapper"> <div class="box"> <h1>From left</h1> <div class="st-form__input--wrapper from-left"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> </div> </div> <div class="box"> <h1>From right</h1> <div class="st-form__input--wrapper from-right"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> </div> </div> <div class="box"> <h1>From top</h1> <div class="st-form__input--wrapper from-top"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> </div> </div> <div class="box"> <h1>From bottom</h1> <div class="st-form__input--wrapper from-bottom"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> </div> </div> <div class="box"> <h1>From sides</h1> <div class="st-form__input--wrapper from-side"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> </div> </div> <div class="box"> <h1>From center</h1> <div class="st-form__input--wrapper from-center"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> </div> </div> <div class="box"> <h1>From middle</h1> <div class="st-form__input--wrapper from-middle"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> </div> </div> <div class="box"> <h1>Blink</h1> <div class="st-form__input--wrapper blink"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> </div> </div> <div class="box"> <h1>Half</h1> <div class="st-form__input--wrapper half"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> </div> </div> <div class="box"> <h1>Circle</h1> <div class="st-form__input--wrapper circle"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> <span class="input-border"></span> </div> </div> <div class="box"> <h1>Bottom border</h1> <div class="st-form__input--wrapper just-bottom"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> </div> </div> <div class="box"> <h1>Top / Bottom border</h1> <div class="st-form__input--wrapper top-bottom"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> </div> </div> <div class="box"> <h1>Partially Top / Bottom border</h1> <div class="st-form__input--wrapper partially"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> <span class="input-border"></span> </div> </div> <div class="box"> <h1>Enlarge</h1> <div class="st-form__input--wrapper enlarge"> <input type="text" class="st-form__input text" /> <span class="input-border"></span> </div> </div> </section> </body> <!-- <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> --> <script type="text/javascript"> </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 输入框样式 喜欢 (0)or分享 (0)
