CSS3表单input输入框美化

最新推荐文章于 2022-02-15 14:10:39 发布
最新推荐文章于 2022-02-15 14:10:39 发布
阅读量845 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wzzl/p/4933013.html
版权

HTML:

<!DOCTYPE html>
<html lang="zh" class="no-js">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>表单input输入框</title>
<style>
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden] {
    display: none;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

a:focus {
    outline: thin dotted;
}

a:active, a:hover {
    outline: 0;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button, input {
    line-height: normal;
}

button, select {
    text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled], html input[disabled] {
    cursor: default;
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'codropsicons';
    src: url('../fonts/codropsicons/codropsicons.eot');
    src: url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
    url('../fonts/codropsicons/codropsicons.woff') format('woff'),
    url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
    url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
}

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.clearfix:before, .clearfix:after {
    content: '';
    display: table;
}

.clearfix:after {
    clear: both;
}

body {
    background: #f9f7f6;
    color: #404d5b;
    font-weight: 500;
    font-size: 1.05em;
    font-family: 'Raleway', Arial, sans-serif;
}

a {
    color: #2fa0ec;
    text-decoration: none;
    outline: none;
}

a:hover, a:focus {
    color: #74777b;
}

.container {
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
}

.content {
    font-size: 150%;
    padding: 3em 0;
}

.content h2 {
    margin: 0 0 2em;
    opacity: 0.1;
}

.content p {
    margin: 1em 0;
    padding: 5em 0 0 0;
    font-size: 0.65em;
}

.bgcolor-1 {
    background: #f0efee;
}

.bgcolor-2 {
    background: #f9f9f9;
}

.bgcolor-3 {
    background: #e8e8e8;
}

.bgcolor-4 {
    background: #2f3238;
    color: #fff;
}

.bgcolor-5 {
    background: #df6659;
    color: #521e18;
}

.bgcolor-6 {
    background: #2fa8ec;
}

.bgcolor-7 {
    background: #d0d6d6;
}

.bgcolor-8 {
    background: #3d4444;
    color: #fff;
}

body .nomargin-bottom {
    margin-bottom: 0;
}

/* Header */
.codrops-header {
    padding: 3em 190px 4em;
    letter-spacing: -1px;
}

.codrops-header h1 {
    font-weight: 800;
    font-size: 4em;
    line-height: 1;
    margin-bottom: 0;
}

.codrops-header h1 span {
    display: block;
    font-size: 50%;
    font-weight: 400;
    padding: 0.325em 0 0.5em 0;
    color: #c3c8cd;
}

/* Top Navigation Style */
.codrops-links {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-size: 1.25em;
    text-align: center;
}

.codrops-links::after {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1px;
    width: 2px;
    height: 100%;
    background: #dbdbdb;
    content: '';
    -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
    transform: rotate3d(0, 0, 1, 22.5deg);
}

.codrops-icon {
    display: inline-block;
    margin: 0.5em;
    padding: 0em 0;
    width: 1.5em;
    text-decoration: none;
}

.codrops-icon span {
    display: none;
}

.codrops-icon:before {
    margin: 0 5px;
    text-transform: none;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    font-family: 'codropsicons';
    line-height: 1;
    speak: none;
    -webkit-font-smoothing: antialiased;
}

.codrops-icon--drop:before {
    content: "\e001";
}

.codrops-icon--prev:before {
    content: "\e004";
}

/* Related demos */
.content--related {
    text-align: center;
    color: #D8DADB;
    font-weight: bold;
}

.media-item {
    display: inline-block;
    padding: 1em;
    vertical-align: top;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
}

.media-item__img {
    opacity: 0.8;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
}

.media-item:hover .media-item__img,
.media-item:focus .media-item__img {
    opacity: 1;
}

.media-item__title {
    font-size: 0.75em;
    margin: 0;
    padding: 0.5em;
}

@media screen and (max-width: 50em) {
    .codrops-header {
        padding: 3em 10% 4em;
    }
}

@media screen and (max-width: 40em) {
    .codrops-header h1 {
        font-size: 2.8em;
    }
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
    display: block;
}

audio, canvas, video {
    display: inline-block;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden] {
    display: none;
}

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

a:focus {
    outline: thin dotted;
}

a:active, a:hover {
    outline: 0;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b, strong {
    font-weight: bold;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    white-space: pre-wrap;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button, input {
    line-height: normal;
}

button, select {
    text-transform: none;
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

button[disabled], html input[disabled] {
    cursor: default;
}

input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

button::-moz-focus-inner, input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}
</style>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<section class="content bgcolor-1">
    <h2 class="nomargin-bottom">Haruki</h2>
                <span class="input input--haruki">
                    <input class="input__field input__field--haruki" type="text" id="input-1"/>
                    <label class="input__label input__label--haruki" for="input-1">
                        <span class="input__label-content input__label-content--haruki">First Name</span>
                    </label>
                </span>
                <span class="input input--haruki">
                    <input class="input__field input__field--haruki" type="text" id="input-2"/>
                    <label class="input__label input__label--haruki" for="input-2">
                        <span class="input__label-content input__label-content--haruki">Last Name</span>
                    </label>
                </span>
                <span class="input input--haruki">
                    <input class="input__field input__field--haruki" type="text" id="input-3"/>
                    <label class="input__label input__label--haruki" for="input-3">
                        <span class="input__label-content input__label-content--haruki">Email</span>
                    </label>
                </span>
</section>
<section class="content">
    <h2>Hoshi</h2>
                <span class="input input--hoshi">
                    <input class="input__field input__field--hoshi" type="text" id="input-4"/>
                    <label class="input__label input__label--hoshi input__label--hoshi-color-1" for="input-4">
                        <span class="input__label-content input__label-content--hoshi">Name</span>
                    </label>
                </span>
                <span class="input input--hoshi">
                    <input class="input__field input__field--hoshi" type="text" id="input-5"/>
                    <label class="input__label input__label--hoshi input__label--hoshi-color-2" for="input-5">
                        <span class="input__label-content input__label-content--hoshi">Street</span>
                    </label>
                </span>
                <span class="input input--hoshi">
                    <input class="input__field input__field--hoshi" type="text" id="input-6"/>
                    <label class="input__label input__label--hoshi input__label--hoshi-color-3" for="input-6">
                        <span class="input__label-content input__label-content--hoshi">Town</span>
                    </label>
                </span>

    <p>Inspired by Andrej Radisic's <a href="https://dribbble.com/shots/1785176-Jawbreaker-input-field">Jawbreaker input
        field</a></p>
</section>
<section class="content bgcolor-4">
    <h2>Kuro</h2>
                <span class="input input--kuro">
                    <input class="input__field input__field--kuro" type="text" id="input-7"/>
                    <label class="input__label input__label--kuro" for="input-7">
                        <span class="input__label-content input__label-content--kuro">Username</span>
                    </label>
                </span>
                <span class="input input--kuro">
                    <input class="input__field input__field--kuro" type="text" id="input-8"/>
                    <label class="input__label input__label--kuro" for="input-8">
                        <span class="input__label-content input__label-content--kuro">Website</span>
                    </label>
                </span>
                <span class="input input--kuro">
                    <input class="input__field input__field--kuro" type="text" id="input-9"/>
                    <label class="input__label input__label--kuro" for="input-9">
                        <span class="input__label-content input__label-content--kuro">Invitation Code</span>
                    </label>
                </span>
</section>
<section class="content bgcolor-7">
    <h2>Jiro</h2>
                <span class="input input--jiro">
                    <input class="input__field input__field--jiro" type="text" id="input-10"/>
                    <label class="input__label input__label--jiro" for="input-10">
                        <span class="input__label-content input__label-content--jiro">Cat's Name</span>
                    </label>
                </span>
                <span class="input input--jiro">
                    <input class="input__field input__field--jiro" type="text" id="input-11"/>
                    <label class="input__label input__label--jiro" for="input-11">
                        <span class="input__label-content input__label-content--jiro">Dog's Name</span>
                    </label>
                </span>
                <span class="input input--jiro">
                    <input class="input__field input__field--jiro" type="text" id="input-12"/>
                    <label class="input__label input__label--jiro" for="input-12">
                        <span class="input__label-content input__label-content--jiro">Hamster's Name</span>
                    </label>
                </span>
</section>
<section class="content">
    <h2>Minoru</h2>
                <span class="input input--minoru">
                    <input class="input__field input__field--minoru" type="text" id="input-13"/>
                    <label class="input__label input__label--minoru" for="input-13">
                        <span class="input__label-content input__label-content--minoru">First Name</span>
                    </label>
                </span>
                <span class="input input--minoru">
                    <input class="input__field input__field--minoru" type="text" id="input-14"/>
                    <label class="input__label input__label--minoru" for="input-14">
                        <span class="input__label-content input__label-content--minoru">Middle Name</span>
                    </label>
                </span>
                <span class="input input--minoru">
                    <input class="input__field input__field--minoru" type="text" id="input-15"/>
                    <label class="input__label input__label--minoru" for="input-15">
                        <span class="input__label-content input__label-content--minoru">Last Name</span>
                    </label>
                </span>
</section>
<section class="content bgcolor-5">
    <h2>Yoko</h2>
                <span class="input input--minoru">
                    <input class="input__field input__field--yoko" type="text" id="input-16"/>
                    <label class="input__label input__label--yoko" for="input-16">
                        <span class="input__label-content input__label-content--yoko">Street</span>
                    </label>
                </span>
                <span class="input input--minoru">
                    <input class="input__field input__field--yoko" type="text" id="input-17"/>
                    <label class="input__label input__label--yoko" for="input-17">
                        <span class="input__label-content input__label-content--yoko">City</span>
                    </label>
                </span>
                <span class="input input--minoru">
                    <input class="input__field input__field--yoko" type="text" id="input-18"/>
                    <label class="input__label input__label--yoko" for="input-18">
                        <span class="input__label-content input__label-content--yoko">Region</span>
                    </label>
                </span>
</section>
<section class="content">
    <h2>Hideo</h2>
                <span class="input input--hideo">
                    <input class="input__field input__field--hideo" type="text" id="input-41"/>
                    <label class="input__label input__label--hideo" for="input-41">
                        <i class="fa fa-fw fa-user icon icon--hideo"></i>
                        <span class="input__label-content input__label-content--hideo">Username</span>
                    </label>
                </span>
                <span class="input input--hideo">
                    <input class="input__field input__field--hideo" type="text" id="input-42"/>
                    <label class="input__label input__label--hideo" for="input-42">
                        <i class="fa fa-fw fa-envelope icon icon--hideo"></i>
                        <span class="input__label-content input__label-content--hideo">Email</span>
                    </label>
                </span>
                <span class="input input--hideo">
                    <input class="input__field input__field--hideo" type="text" id="input-43"/>
                    <label class="input__label input__label--hideo" for="input-43">
                        <i class="fa fa-fw fa-lock icon icon--hideo"></i>
                        <span class="input__label-content input__label-content--hideo">Password</span>
                    </label>
                </span>
</section>
<section class="content bgcolor-3">
    <h2>Kyo</h2>
                <span class="input input--kyo">
                    <input class="input__field input__field--kyo" type="text" id="input-19"/>
                    <label class="input__label input__label--kyo" for="input-19">
                        <span class="input__label-content input__label-content--kyo">What's your email?</span>
                    </label>
                </span>
</section>
<section class="content bgcolor-4">
    <h2>Akira</h2>
                <span class="input input--akira">
                    <input class="input__field input__field--akira" type="text" id="input-22"/>
                    <label class="input__label input__label--akira" for="input-22">
                        <span class="input__label-content input__label-content--akira">First Name</span>
                    </label>
                </span>
                <span class="input input--akira">
                    <input class="input__field input__field--akira" type="text" id="input-23"/>
                    <label class="input__label input__label--akira" for="input-23">
                        <span class="input__label-content input__label-content--akira">Last Name</span>
                    </label>
                </span>
                <span class="input input--akira">
                    <input class="input__field input__field--akira" type="text" id="input-24"/>
                    <label class="input__label input__label--akira" for="input-24">
                        <span class="input__label-content input__label-content--akira">Maiden Name</span>
                    </label>
                </span>
</section>
<section class="content">
    <h2>Ichiro</h2>
                <span class="input input--ichiro">
                    <input class="input__field input__field--ichiro" type="text" id="input-25"/>
                    <label class="input__label input__label--ichiro" for="input-25">
                        <span class="input__label-content input__label-content--ichiro">Bird's Color</span>
                    </label>
                </span>
                <span class="input input--ichiro">
                    <input class="input__field input__field--ichiro" type="text" id="input-26"/>
                    <label class="input__label input__label--ichiro" for="input-26">
                        <span class="input__label-content input__label-content--ichiro">Wing Span</span>
                    </label>
                </span>
                <span class="input input--ichiro">
                    <input class="input__field input__field--ichiro" type="text" id="input-27"/>
                    <label class="input__label input__label--ichiro" for="input-27">
                        <span class="input__label-content input__label-content--ichiro">Beak Length</span>
                    </label>
                </span>
</section>
<section class="content bgcolor-6">
    <h2>Juro</h2>
                <span class="input input--juro">
                    <input class="input__field input__field--juro" type="text" id="input-28"/>
                    <label class="input__label input__label--juro" for="input-28">
                        <span class="input__label-content input__label-content--juro">First Name</span>
                    </label>
                </span>
                <span class="input input--juro">
                    <input class="input__field input__field--juro" type="text" id="input-29"/>
                    <label class="input__label input__label--juro" for="input-29">
                        <span class="input__label-content input__label-content--juro">Last Name</span>
                    </label>
                </span>
                <span class="input input--juro">
                    <input class="input__field input__field--juro" type="text" id="input-30"/>
                    <label class="input__label input__label--juro" for="input-30">
                        <span class="input__label-content input__label-content--juro">Maiden Name</span>
                    </label>
                </span>
</section>
<section class="content bgcolor-4">
    <h2>Madoka</h2>
                <span class="input input--madoka">
                    <input class="input__field input__field--madoka" type="text" id="input-31"/>
                    <label class="input__label input__label--madoka" for="input-31">
                        <svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77"
                             preserveAspectRatio="none">
                            <path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
                        </svg>
                        <span class="input__label-content input__label-content--madoka">Frequency</span>
                    </label>
                </span>
                <span class="input input--madoka">
                    <input class="input__field input__field--madoka" type="text" id="input-32"/>
                    <label class="input__label input__label--madoka" for="input-32">
                        <svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77"
                             preserveAspectRatio="none">
                            <path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
                        </svg>
                        <span class="input__label-content input__label-content--madoka">Weight</span>
                    </label>
                </span>
                <span class="input input--madoka">
                    <input class="input__field input__field--madoka" type="text" id="input-33"/>
                    <label class="input__label input__label--madoka" for="input-33">
                        <svg class="graphic graphic--madoka" width="100%" height="100%" viewBox="0 0 404 77"
                             preserveAspectRatio="none">
                            <path d="m0,0l404,0l0,77l-404,0l0,-77z"/>
                        </svg>
                        <span class="input__label-content input__label-content--madoka">Strength</span>
                    </label>
                </span>
</section>
<section class="content">
    <h2>Kaede</h2>
                <span class="input input--kaede">
                    <input class="input__field input__field--kaede" type="text" id="input-35"/>
                    <label class="input__label input__label--kaede" for="input-35">
                        <span class="input__label-content input__label-content--kaede">First Name</span>
                    </label>
                </span>
                <span class="input input--kaede">
                    <input class="input__field input__field--kaede" type="text" id="input-36"/>
                    <label class="input__label input__label--kaede" for="input-36">
                        <span class="input__label-content input__label-content--kaede">Last Name</span>
                    </label>
                </span>
                <span class="input input--kaede">
                    <input class="input__field input__field--kaede" type="text" id="input-37"/>
                    <label class="input__label input__label--kaede" for="input-37">
                        <span class="input__label-content input__label-content--kaede">Website</span>
                    </label>
                </span>
</section>
<section class="content bgcolor-8">
    <h2>Isao</h2>
                <span class="input input--isao">
                    <input class="input__field input__field--isao" type="text" id="input-38"/>
                    <label class="input__label input__label--isao" for="input-38" data-content="First Name">
                        <span class="input__label-content input__label-content--isao">First Name</span>
                    </label>
                </span>
                <span class="input input--isao">
                    <input class="input__field input__field--isao" type="text" id="input-39"/>
                    <label class="input__label input__label--isao" for="input-39" data-content="Middle Name">
                        <span class="input__label-content input__label-content--isao">Middle Name</span>
                    </label>
                </span>
                <span class="input input--isao">
                    <input class="input__field input__field--isao" type="text" id="input-40"/>
                    <label class="input__label input__label--isao" for="input-40" data-content="Last Name">
                        <span class="input__label-content input__label-content--isao">Last Name</span>
                    </label>
                </span>
</section>
</div>
<!-- /container -->
<script>
    /*!
     * classie - class helper functions 封装js
     * from bonzo https://github.com/ded/bonzo
     * 
     * classie.has( elem, 'my-class' ) -> true/false
     * classie.add( elem, 'my-new-class' )
     * classie.remove( elem, 'my-unwanted-class' )
     * classie.toggle( elem, 'my-class' )
     */

    /*jshint browser: true, strict: true, undef: true */
    /*global define: false */

    (function (window) {

        'use strict';

// class helper functions from bonzo https://github.com/ded/bonzo

        function classReg(className) {
            return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
        }

// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
        var hasClass, addClass, removeClass;

        if ('classList' in document.documentElement) {
            hasClass = function (elem, c) {
                return elem.classList.contains(c);
            };
            addClass = function (elem, c) {
                elem.classList.add(c);
            };
            removeClass = function (elem, c) {
                elem.classList.remove(c);
            };
        }
        else {
            hasClass = function (elem, c) {
                return classReg(c).test(elem.className);
            };
            addClass = function (elem, c) {
                if (!hasClass(elem, c)) {
                    elem.className = elem.className + ' ' + c;
                }
            };
            removeClass = function (elem, c) {
                elem.className = elem.className.replace(classReg(c), ' ');
            };
        }

        function toggleClass(elem, c) {
            var fn = hasClass(elem, c) ? removeClass : addClass;
            fn(elem, c);
        }

        var classie = {
            // full names
            hasClass: hasClass,
            addClass: addClass,
            removeClass: removeClass,
            toggleClass: toggleClass,
            // short names
            has: hasClass,
            add: addClass,
            remove: removeClass,
            toggle: toggleClass
        };

// transport
        if (typeof define === 'function' && define.amd) {
            // AMD
            define(classie);
        } else {
            // browser global
            window.classie = classie;
        }

    })(window);

</script>
<script>
    (function () {
        // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
        if (!String.prototype.trim) {
            (function () {
                // Make sure we trim BOM and NBSP
                var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
                String.prototype.trim = function () {
                    return this.replace(rtrim, '');
                };
            })();
        }

        [].slice.call(document.querySelectorAll('input.input__field')).forEach(function (inputEl) {
            // in case the input is already filled..
            if (inputEl.value.trim() !== '') {
                classie.add(inputEl.parentNode, 'input--filled');
            }

            // events:
            inputEl.addEventListener('focus', onInputFocus);
            inputEl.addEventListener('blur', onInputBlur);
        });

        function onInputFocus(ev) {
            classie.add(ev.target.parentNode, 'input--filled');
        }

        function onInputBlur(ev) {
            if (ev.target.value.trim() === '') {
                classie.remove(ev.target.parentNode, 'input--filled');
            }
        }
    })();
</script>
</body>
</html>

 

转载于:https://www.cnblogs.com/wzzl/p/4933013.html

aili1947
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css实现html页面输入框input的美化
iceking66的博客
09-30 1万+
css实现html页面输入框input的美化 html> html> head> meta charset="UTF-8"> meta http-equiv = "X-UA-Compatible" content = "IE=edge,chrome=1" /> meta name="viewport" content="width=device-width,initi
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
12-28
分享一个用纯 CSS3 实现的，漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果，始终显示标签label，并显示 placeholder（占位符）文本。 演示地址：https://codepen.io/MichaelArestad/full/ohLIa HTML 代码： <div class=row> <p>Click every input.</p> </div> <div class=row> <span> <input class=basic-slide id=name type=text p
CSS3 input[type=file] 样式美化，input上传按钮美化
lowers_sunshine的博客
11-28 573
思路： input file上传按钮的美化思路是，先把之前的按钮透明度opacity设置为0,然后，外层用div包裹，就实现了美化功能。 代码如下： DOM结构：         点击这里上传文件选择文件     CSS样式1：     /*a  upload *
14种CSS3炫酷表单input输入框美化效果
12-20
14种CSS3炫酷表单input输入框美化效果
14款CSS3炫酷表单input输入框美化效果【附源码】
web前端开发
10-21 7268
这是一款效果非常酷的CSS3表单input输入框美化效果插件。为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验。这个CSS3表单input输入框美化插...
CSS3 input输入框蓝光特效特效代码
03-20
"CSS3 input输入框蓝光特效特效代码"是一个利用CSS3的`transition`过渡属性来实现的动态效果，使得输入框在聚焦时呈现出一种蓝色光芒的效果，增加了网页的互动性和吸引力。 首先，我们来看`input`元素的基本结构。...
CSS3表单输入框动画特效
04-06
本主题聚焦于“CSS3表单输入框动画特效”，这是一个利用CSS3技术实现的创新性表单元素设计，旨在使表单输入框更具交互性和吸引力。下面将详细介绍这些知识点。 首先，我们来谈谈CSS3中的表单样式。传统的HTML表单...
F:\Soft\input输入框美化效果.zip
11-22
描述提到“14种CSS3炫酷表单input输入框美化效果”，这表明这个压缩包内包含了一系列使用CSS3技术实现的文本输入框的视觉增强示例，旨在提升用户在交互过程中的体验。标签“css3”进一步确认了这些效果是通过CSS3的...
CSS3表单输入框动画特效.zip
07-04
CSS3表单输入框动画特效是一款表单输入框显示图标动画，输入框验证效果代码。
多种风格效果的文字输入框
04-04
这是一个由源码天堂ios源码频道整理和上传的多种风格效果的文字输入框案例，源码TextFieldEffects，TextFieldEffects是使用Swift制作的具有多种风格效果的文字输入框。同学们可以选择自己喜欢的风格。共有以下多种风格：Kaede -Hoshi - Jiro - Isao -Minoru - Yoko - Madoka
输入框input样式，各种效果齐全
11-11
输入框input样式，各种效果齐全
原生CSS input样式美化
黄钟飞的博客
02-15 5725
原生CSS input样式美化、覆盖、默认
html怎么设置好看的文本框,14种CSS3炫酷表单input输入框美化效果
weixin_27183235的博客
06-03 5361
这是一款效果非常酷的CSS3表单input输入框美化效果插件。为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验。这个CSS3表单input输入框美化插件就是一个很好的例子。这个插件中的效果大多数是使用CSS transitions来切换伪元素制作的。HTML结构HTML结构使用一个span作为wrapper，包裹住input和它的label。为了效果能正常工作，要将label放...
css3 ----input focus的发光，缩放 效果
我的地盘
07-03 3276
chrome下input focus默认有个黄色的光影，如果不想要的话 可以在css样式中 添加一下       input：focus{          outline:none;      }   就可以去掉了！    我的样式代码：     input{        border-radius:6px;        border:
html怎么美化输入框,css 美化input输入框-美化按钮
weixin_32955455的博客
06-04 1879
摘要 腾兴网为您分享:css 美化input输入框-美化按钮，榛果民宿，图乐，天气预报，苏宁易购等软件知识，以及图片文字扫描识别软件，世纪证劵，安安学车，富甲天下4，蚂蚁财富，企鹅影院，我吻过你的脸,延安党建云，大地魂酒，港口与航道工程一级建造师，变形金刚百炼为战，3dzhijia，福建农信在线，亮视，数据库部署等软件it资讯，欢迎关注腾兴网。代码如下 .SearchBar { font-size...
CSS Input 样式美化
DevOps海洋的渔夫@专栏
02-23 6345
仅供学习，转载请注明出处 简介 在设置input的适合，你会觉得默认的input样式并不好看。那么该怎么优化呢？ 默认的input 可以从上面看出，这个样式的确不好看。 优化input样式 设置 outline-style: none ; 取消外边框 可以从上图看出，在点击输入input的适合，框边就显示比较粗的边框，那么怎么将这个样式...
css3炫酷表单input输入框
最新发布
06-06
而CSS3承载的无限可能打破了这个局面，让表单输入框焕发出别样的魅力。 首先，CSS3可以让输入框变得更加美观，通过改变输入框的外观，鼠标悬停时的背景色以及输入时的动态效果等，使得整个表单更加具有吸引力和互动...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值