.self-updating-field {
    color: black;
    transition: 1s;
    transition-timing-function: ease-in-out;
}

.self-updating-field:not([readonly]):hover,
.self-updating-field:not([readonly]):focus,
.self-updating-field:not([readonly]):active{
    transition: 1s;
    transition-timing-function: ease-in-out;
    border-bottom: 1px solid black;
}

.self-updating-field.success {
    color: green;
    transition: 1s;
    transition-timing-function: ease-in-out;
}

.self-updating-field.error {
    color: red;
    transition: 1s;
    transition-timing-function: ease-in-out;
}