.p-inputtext { margin: 0; } .p-fluid .p-inputtext { width: 100%; } /* InputGroup */ .p-inputgroup { display: flex; align-items: stretch; width: 100%; } .p-inputgroup-addon { display: flex; align-items: center; justify-content: center; } .p-inputgroup .p-float-label { display: flex; align-items: stretch; width: 100%; } .p-inputgroup .p-inputtext, .p-fluid .p-inputgroup .p-inputtext, .p-inputgroup .p-inputwrapper, .p-fluid .p-inputgroup .p-input { flex: 1 1 auto; width: 1%; } /* Floating Label */ .p-float-label { display: block; position: relative; } .p-float-label label { position: absolute; pointer-events: none; top: 50%; margin-top: -.5rem; transition-property: all; transition-timing-function: ease; line-height: 1; } .p-float-label textarea ~ label { top: 1rem; } .p-float-label input:focus ~ label, .p-float-label input.p-filled ~ label, .p-float-label textarea:focus ~ label, .p-float-label textarea.p-filled ~ label, .p-float-label .p-inputwrapper-focus ~ label, .p-float-label .p-inputwrapper-filled ~ label { top: -.75rem; font-size: 12px; } .p-float-label .input:-webkit-autofill ~ label { top: -20px; font-size: 12px; } .p-float-label .p-placeholder, .p-float-label input::placeholder, .p-float-label .p-inputtext::placeholder { opacity: 0; transition-property: all; transition-timing-function: ease; } .p-float-label .p-focus .p-placeholder, .p-float-label input:focus::placeholder, .p-float-label .p-inputtext:focus::placeholder { opacity: 1; transition-property: all; transition-timing-function: ease; } .p-input-icon-left, .p-input-icon-right { position: relative; display: inline-block; } .p-input-icon-left > i, .p-input-icon-right > i { position: absolute; top: 50%; margin-top: -.5rem; } .p-fluid .p-input-icon-left, .p-fluid .p-input-icon-right { display: block; width: 100%; }