*{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; } form .txt_field{ position: relative; border-bottom: 2px solid #adadad; margin: 20px 0px; } .txt_field_opt { position: relative; border-bottom: 2px solid #adadad; margin: 20px 0px; } .txt_field input { width: 100%; padding: 0 5px; height: 40px; font-size: 16px; border: none; background: none; outline: none; } .txt_field_opt input { width: 100%; padding: 0 5px; height: 40px; font-size: 16px; border: none; background: none; outline: none; } .txt_field label { position: absolute; top: 50%; left: 5px; color: #adadad; transform: translateY(-50%); font-size: 16px; pointer-events: none; transition: .5s; } .txt_field_opt label { position: absolute; top: 50%; left: 5px; color: #adadad; transform: translateY(-50%); font-size: 16px; pointer-events: none; transition: .5s; } .txt_field span::before{ content: ''; position: absolute; top: 40px; left: 0; width: 0%; height: 2px; background: #2691d9; transition: .5s; } .txt_field_opt span::before{ content: ''; position: absolute; top: 40px; left: 0; width: 0%; height: 2px; background: #2691d9; transition: .5s; } .txt_field_opt input:focus ~ label, .txt_field_opt input:not(:placeholder-shown) ~ label{ top: -5px; color: #2691d9; } .txt_field input:focus ~ label, .txt_field input:valid ~ label{ top: -5px; color: #2691d9; } .txt_field_opt input:focus ~ span::before, .txt_field_opt input:not(:placeholder-shown) ~ span::before{ width: 100%; } .txt_field input:focus ~ span::before, .txt_field input:valid ~ span::before{ width: 100%; } .dropdown { display: flex; flex-direction: column; } .dropdown label { margin-bottom: 5px; border-bottom: 1px solid #adadad; } .dropdown select { border-radius: 0px; height: 30px; border: none; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #adadad; } .btn-confirm { margin-bottom: 10px; border-radius: 0px; border: none; height: 30px; width: 100%; } .form_div { margin-left: 5px; margin-right: 5px; } .number_field { display: flex; flex-direction: column; } .number_field label { padding-bottom: 2px; margin-bottom: 5px; border-bottom: 1px solid #adadad; } .number_field input { border: none; outline: none; height: 30px; padding-bottom: 2px; margin-bottom: 5px; border-bottom: 1px solid #adadad; width: 100%; } .headline h3 { text-align: center; font-weight: 400; color: #002e5b; } .information { border-bottom: 1px solid #adadad; margin-bottom: 5px; }