@odyzeo/form-item/dist/form-item.css

Odyzeo form item component with Vue

.form-item{border-radius:5px;font-size:16px}.form-item__field{position:relative;background:#fff;border-radius:5px;border:1px solid #d7d7d7;transition:border .2s ease}.form-item__input{box-sizing:border-box;display:block;width:100%;border:none;border-radius:3px;padding:30px 10px 10px;background:#fff;-webkit-appearance:none;resize:none}input.form-item__input::-moz-placeholder,textarea.form-item__input::-moz-placeholder{color:transparent;-moz-transition:color .3s;transition:color .3s}input.form-item__input:-ms-input-placeholder,textarea.form-item__input:-ms-input-placeholder{color:transparent;-ms-transition:color .3s;transition:color .3s}input.form-item__input::placeholder,textarea.form-item__input::placeholder{color:transparent;transition:color .3s}.form-item__input:active,.form-item__input:focus{outline:none}.form-item__input:focus::-moz-placeholder{color:hsla(0,0%,60%,.9)}.form-item__input:focus:-ms-input-placeholder{color:hsla(0,0%,60%,.9)}.form-item__input:focus::placeholder{color:hsla(0,0%,60%,.9)}.form-item__label{display:block;box-sizing:border-box;position:absolute;top:20px;left:10px;z-index:1;color:#aaa7b4;transition:all .3s;pointer-events:none}.form-item--filled .form-item__label,.form-item--tags .form-item__label,.form-item__input:focus+.form-item__label{top:10px;font-size:12px;color:#999}.form-item--filled .form-item__field{border-color:#50bccb}.form-item__input:-webkit-autofill+.form-item__label{top:10px;font-size:12px;color:#999}.form-item--no-label .form-item__input{padding:20px 10px}.form-item__field:focus-within{border-color:#f4a47d}.form-item__error{padding:3px 3px 0;color:#df4012;font-size:12px;line-height:1.1}.form-item__hider{position:absolute;top:0;right:0;left:0;z-index:1;height:30px;background:#fff;border-radius:5px 5px 0 0;pointer-events:none}.form-item--error .form-item__field{border-color:#df4012}.form-item--group .form-item__field{display:flex;overflow:hidden}.form-item__readonly{background:#bbb;display:flex;justify-content:center;align-items:center;padding:0 15px;background:#e6e6e6;line-height:1}.form-item--disabled{opacity:.5}.form-item__wrapper{position:relative;display:block;flex:1 1 auto}.form-item--hidden .form-item__field{display:none}