استایل زیبا برای Text Input و Label ( نمونه 8)

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,600,300,800);

* {

box-sizing: border-box;

}

html,

body {

overflow-x: hidden;

font-family: "Open Sans", sans-serif;

font-weight: 300;

color: #fff;

background: #134A46;

text-align: center;

}

span {

position: relative;

display: inline-block;

margin: 45px 10px;

}

.balloon {

display: inline-block;

width: 215px;

padding: 10px 0 10px 15px;

font-family: "Open Sans", sans;

font-weight: 400;

color: #377D6A;

background: #efefef;

border: 0;

border-radius: 3px;

outline: 0;

text-indent: 60px;

transition: all .3s ease-in-out;

}

.balloon::-webkit-input-placeholder {

color: #efefef;

text-indent: 0;

font-weight: 300;

}

.balloon + label {

display: inline-block;

position: absolute;

top: 8px;

left: 0;

bottom: 8px;

padding: 5px 15px;

color: #032429;

font-size: 11px;

font-weight: 700;

text-transform: uppercase;

text-shadow: 0 1px 0 rgba(19, 74, 70, 0);

transition: all .3s ease-in-out;

border-radius: 3px;

background: rgba(122, 184, 147, 0);

}

.balloon + label:after {

position: absolute;

content: "";

width: 0;

height: 0;

top: 100%;

left: 50%;

margin-left: -3px;

border-left: 3px solid transparent;

border-right: 3px solid transparent;

border-top: 3px solid rgba(122, 184, 147, 0);

transition: all .3s ease-in-out;

}

.balloon:focus,

.balloon:active {

color: #377D6A;

text-indent: 0;

background: #fff;

}

.balloon:focus::-webkit-input-placeholder,

.balloon:active::-webkit-input-placeholder {

color: #aaa;

}

.balloon:focus + label,

.balloon:active + label {

color: #fff;

text-shadow: 0 1px 0 rgba(19, 74, 70, 0.4);

background: #7ab893;

transform: translateY(-40px);

}

.balloon:focus + label:after,

.balloon:active + label:after {

border-top: 4px solid #7ab893;

}

- - , .