Use CSS to automatically add ‘required field’ asterisk to form inputs

by

Is that what you had in mind?

http://jsfiddle.net/erqrN/1/

<label class="required">Name:</label>
<input type="text">

<style>
  .required:after {
    content:" *";
    color: red;
  }
</style>


.required:after {
  content:" *";
  color: red;
}
<label class="required">Name:</label>
<input type="text">

See https://developer.mozilla.org/en-US/docs/Web/CSS/pseudo-elements

More Related Contents:

  1. Twitter Bootstrap Form File Element Upload Button
  2. override css for html5 form validation/required popup
  3. CSS Input with width: 100% goes outside parent’s bound
  4. How do I stop Chrome from yellowing my site’s input boxes?
  5. Allowed characters for CSS identifiers
  6. Styling Password Fields in CSS
  7. How do I style the HTML form validation error messages with CSS?
  8. iOS forces rounded corners and glare on inputs
  9. Is it acceptable to use tables for forms? Or is it still more correct to use divs?
  10. blur everything but hovered CSS
  11. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  12. CSS3 Transparency + Gradient
  13. See :hover state in Chrome Developer Tools
  14. Why did Bootstrap 3 switch to box-sizing: border-box?
  15. CSS: fixed position on x-axis but not y?
  16. how to properly display an iFrame in mobile safari
  17. Defined Edges With CSS3 Filter Blur
  18. WebKit: Blurry text with css scale + translate3d
  19. How can I add a box-shadow on one side of an element?
  20. iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue
  21. How can I create multi columns from a single unordered list?
  22. How to style the UL list to a single line
  23. Align button at the bottom of div using CSS
  24. text flowing out of div
  25. Can I set the height of a div based on a percentage-based width? [duplicate]
  26. Is it bad practice to prefix single lines of CSS with // as a personal comment style?
  27. Issue when centering vertically with flexbox when heights are unknown
  28. Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css
  29. Ellipsis in flexbox container [duplicate]
  30. CSS Double Border with outer border thicker than inner border

Leave a Comment