.form-group { position: relative; margin-top: 35px; margin-bottom: 20px; } .input-group { position: relative; } .input-group .form-control { position: relative; z-index: inherit; float: inherit; width: 100%; margin-bottom: 0; } .form-control:focus { border-color: #757575; outline: none; box-shadow: none; } label { position: absolute; top: -10px; color: #999; font-size: 12px; font-weight: 300; transition: 0.2s ease all; -moz-transition: 0.2s ease all; -webkit-transition: 0.2s ease all; } .form-horizontal .control-label { position: relative; top: 0; margin-bottom: 0; } @media (min-width: 768px) { .form-horizontal .control-label { font-size: 16px; } } .float-label { left: 0; top: 14px; font-size: 16px; pointer-events: none; } .form-control:focus ~ .float-label, .form-control:valid ~ .float-label { font-size: 12px; top: 2px; } label { color: #03a9f4; } .form-bar:before, .form-bar:after { background: #03a9f4; } .form-control:valid ~ .control-label { } .form-group .help-block { position: absolute; } .help-block { color: #bdbdbd; / / caption font-size: 12 px; font-weight: 300; } .input-group-addon { border: none; background: transparent; } .input-group-addon, .form-inline .input-group { display: table-cell; } .input-group-addon, .input-group-btn { width: inherit; } .input-group { width: 100%; } @media (min-width: 768px) { .form-inline .form-group { margin-top: 16px; } .input-group-btn, .input-group .form-control, .input-group-addon, .form-inline .input-group { display: inline-block; } .input-group { width: auto; } } .form-bar { position: relative; display: block; width: 100%; } .form-bar:before, .form-bar:after { content: ''; height: 1px; width: 0; bottom: 0; position: absolute; transition: 0.3s ease all; -moz-transition: 0.3s ease all; -webkit-transition: 0.3s ease all; } .form-bar:before { left: 50%; } .form-bar:after { right: 50%; } .form-control:focus ~ .form-bar:before, .form-control:focus ~ .form-bar:after { width: 50%; } .form-control:focus ~ .form-highlight { -webkit-animation: inputHighlighter 0.3s ease; -moz-animation: inputHighlighter 0.3s ease; animation: inputHighlighter 0.3s ease; } @-webkit-keyframes inputHighlighter { from { background: #5264AE; } to { width: 0; background: transparent; } } @-moz-keyframes inputHighlighter { from { background: #5264AE; } to { width: 0; background: transparent; } } @keyframes inputHighlighter { from { background: #5264AE; } to { width: 0; background: transparent; } } @media (min-width: 768px) { .form-inline .radio label, .form-inline .checkbox label { padding-left: 5px; } } .form-control-static { font-size: 16px; } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: transparent; border-bottom-style: dashed; } #focusedInput { border-color: #ccc; border-color: rgba(82, 168, 236, .8); outline: 0; box-shadow: none; }