.has-float-label{ display:block; position:relative; width:100%; } .has-float-label label,.has-float-label>span{ position:absolute; cursor:text; font-size:75%; opacity:1; -webkit-transition:all .2s; transition:all .2s; top:-.5em; left:.75rem; z-index:3; line-height:1; padding:0 3px; background:#fff; font-weight:normal; } .has-float-label>span{/*For select2-bootstrap dropdown set top,left margin 0*/ top:0; left:0; } .has-float-label label::after,.has-float-label>span::after{ content:" "; display:block; position:absolute; /*background:#fff;*/ height:2px; top:50%; left:-.2em; right:-.2em; z-index:-1; } .has-float-label .form-control::-webkit-input-placeholder{ opacity:1; -webkit-transition:all .2s; transition:all .2s; } .has-float-label .form-control::-moz-placeholder{ opacity:1; transition:all .2s; } .has-float-label .form-control:-ms-input-placeholder{ opacity:1; transition:all .2s; } .has-float-label .form-control::placeholder{ opacity:1; -webkit-transition:all .2s; transition:a.has-float-labelll .2s; } .form-control:placeholder-shown:not(:focus)+*{ font-size:100%; color: #6c757d; opacity: 0; top:.3em; } .input-group .has-float-label{ -webkit-box-flex:1; -webkit-flex-grow:1; -ms-flex-positive:1; flex-grow:1; margin-bottom:0; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; -webkit-flex-direction:column; -ms-flex-direction:column; flex-direction:column; -webkit-box-pack:center; -webkit-justify-content:center; -ms-flex-pack:center; justify-content:center; } /*pass_show*/ .ptxt { user-select: none; color:#6c757d; float: right !important; font-size: 20px !important; left: auto !important; background: transparent !important; position: absolute; cursor: pointer !important; top: 30% !important; right: 10px; opacity: 0; } .has-float-label:not(:hover) > .ptxt { opacity: 0; } .ptxt:pressed > .form-control { background-color: #25272a; box-shadow: none; color: #fff; border-color: #4f63e7 } .errmsg { color: #E78587; } .gradient-custom { /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ background: linear-gradient(140deg, rgba(0, 33, 58, 1), rgba(66, 108, 121, 1)) } .form-control { background-color: #25272a !important; color:#d6d9db; } .form-control:focus { box-shadow: none; color: #fff; border-color: #4f63e7; } .btn-dark { background-color: #25272a; color: #fff; } .btn-dark:hover { background-color: #25272a; border-color: "pink"; }