Here are some options.
.error This changes the input style to show the error.
.success This changes the input style to show sucess.
.message Add a div after the input and add the class of message.
disabled Add disabled to the input
<form action="#" autocomplete="off"> <ul class="form-fields"> <li> <label for="general">Text</label> <input type="text" name="general" id="general"> </li> <li class="success"> <label for="success">Success</label> <input type="text" name="success" id="success" value="A correct value"> <div class="message">Correct!</div> </li> <li class="error"> <label for="error">Inline errors</label> <input type="text" name="error" id="error" value="An incorrect value"> <div class="message">Not a valid response</div> </li> <li> <label for="disabled">Disabled</label> <input type="text" name="disabled" id="disabled" disabled> </li> <li> <label for="email">Email</label> <input type="email" name="email" id="email"> </li> <li> <label for="tel">Tel</label> <input type="tel" name="tel" id="tel"> </li> <li> <label for="password">Password</label> <input type="password" name="password" id="password"> </li> <li class="optional"> <label for="textarea">Text box</label> <textarea name="textarea" id="textarea" cols="30" rows="10"></textarea> </li> </ul> </form>