fit-input
Version:
输入框
155 lines (143 loc) • 3.96 kB
CSS
.fit-input {
font-size: 14px;
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color: #333;
box-sizing: border-box;
position: relative;
margin-top: 20px;
background: white; }
.fit-input .input {
font-size: 14px;
padding: 10px 10px 10px 5px;
display: block;
width: 100%;
border: none;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
color: #333;
box-shadow: none ; }
.fit-input .input.center {
text-align: center; }
.fit-input .input:focus {
outline: none; }
.fit-input .input:disabled {
border-bottom: 1px dotted #ccc;
color: #ccc; }
.fit-input .input:not(:focus)::-webkit-input-placeholder {
transition: opacify .3s;
opacity: 0; }
.fit-input .input:not(:focus):-moz-placeholder {
/* Firefox 18- */
transition: opacify .3s;
opacity: 0; }
.fit-input .input:not(:focus)::-moz-placeholder {
/* Firefox 19+ */
transition: opacify .3s;
opacity: 0; }
.fit-input .input:not(:focus):-ms-input-placeholder {
transition: opacify .3s;
opacity: 0; }
.fit-input .input:not(:focus).no-label::-webkit-input-placeholder {
opacity: 1; }
.fit-input .input:not(:focus).no-label:-moz-placeholder {
/* Firefox 18- */
opacity: 1; }
.fit-input .input:not(:focus).no-label::-moz-placeholder {
/* Firefox 19+ */
opacity: 1; }
.fit-input .input:not(:focus).no-label:-ms-input-placeholder {
opacity: 1; }
.fit-input .label {
color: #999;
font-size: 14px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all; }
.fit-input .label.center {
width: 100%;
text-align: center; }
.fit-input .label .label-error {
color: #f50;
margin-left: 10px; }
.fit-input .label.disabled {
color: #ccc; }
.fit-input .label.valid-disabled {
top: -10px;
font-size: 12px;
font-weight: bold;
color: #ccc; }
.fit-input .input:focus ~ .label, .fit-input .input:valid ~ .label {
top: -10px;
font-size: 12px;
font-weight: bold;
color: #7266ba; }
.fit-input .input:focus ~ .label.disabled, .fit-input .input:valid ~ .label.disabled {
color: #ccc; }
.fit-input .input:valid:not(:focus) ~ .label {
color: #999; }
.fit-input .bottom-bar {
position: relative;
display: block;
width: 100%; }
.fit-input .bottom-bar:before, .fit-input .bottom-bar:after {
content: '';
height: 2px;
width: 0;
bottom: 0;
position: absolute;
background: #7266ba;
transition: 0.2s ease all;
-moz-transition: 0.2s ease all;
-webkit-transition: 0.2s ease all; }
.fit-input .bottom-bar:before {
left: 50%; }
.fit-input .bottom-bar:after {
right: 50%; }
.fit-input .bottom-bar.bottom-bar-error:before, .fit-input .bottom-bar.bottom-bar-error:after {
width: 50%;
background: #f50; }
.fit-input .input:focus ~ .bottom-bar:before, .fit-input .input:focus ~ .bottom-bar:after {
width: 50%; }
.fit-input .highlight {
position: absolute;
height: 60%;
width: 100px;
top: 25%;
left: 0;
pointer-events: none;
opacity: 0.5; }
.fit-input .input:focus ~ .highlight {
-webkit-animation: inputHighlighter 0.3s ease;
animation: inputHighlighter 0.3s ease; }
.fit-input .right-addon {
position: absolute;
right: 0;
top: 0;
height: 38px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center; }
@-webkit-keyframes inputHighlighter {
from {
background: #5264AE; }
to {
width: 0;
background: transparent; } }
@keyframes inputHighlighter {
from {
background: #5264AE; }
to {
width: 0;
background: transparent; } }