Use CSS to automatically add required field asterisk to form inputs

Question

What is a good way to overcome the unfortunate fact that this code will not work as desired    lt div class  required  gt       lt label gt Name  lt  label gt       lt input type  text  gt   lt  div gt    lt style gt       required input after   content         lt  style gt    In a perfect world  all required inputs would get the little asterisk indicating that the field is required  This solution impossible since the CSS is inserted after the element content  not after the element itself  but something like it would be ideal  On a site with thousands of required fields  I can move the asterisk in front of the input with one change to one line   after to  before  or I can move it to the end of the label   required label after  or in front of the label  or to a position on the containing box  etc      This is important not just in case I change my mind about where to place the asterisk everywhere  but also for odd cases where the form layout doesn t allow the asterisk in the standard position  It also plays well with validation that checks the form or highlights improperly completed controls   Lastly  it doesn t add additional markup   Are there any good solutions that have all or most of the advantages of the impossible code

User · Accepted Answer

Is that what you had in mind   http   jsfiddle net erqrN 1    lt label class  required  gt Name  lt  label gt   lt input type  text  gt    lt style gt     required after       content           color  red       lt  style gt     x000D   x000D   required after   x000D    content       x000D    color  red  x000D    x000D   lt label class  required  gt Name  lt  label gt  x000D   lt input type  text  gt  x000D   x000D   x000D    See https   developer mozilla org en-US docs Web CSS pseudo-elements

User · Answer

Use jQuery and CSS   x000D   x000D  jQuery document  ready function     x000D   jQuery   required    after   lt span class  required  gt   lt  span gt     x000D      x000D   required   x000D      position  absolute  x000D      margin-left  -10px  x000D      color   FB0000  x000D      font-size  15px  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt input type  text  value  xxx  required gt  x000D   x000D   x000D

User · Answer

You can achieve the desired result by encapsulating the HTML code in a div tag which contains the  required  class followed by the  form-group  class   however this works only if you have Bootstrap    lt div class  form-group required  gt       lt div class  required  gt           lt label gt Name  lt  label gt           lt input type  text  gt       lt  div gt     lt div gt

User · Answer

Although this is the accepted answer  please ignore me and use the  after syntax suggested below  My solution is not accessible     A similar outcome could be achieved by using a background image of a picture of an asterisk and setting the background of the label input the outer div and a padding of the size of the asterisk image  Something like this      required input      padding-right  25px     background-image  url          background-position  right top      This will put the asterisk INSIDE the text box  but putting the same on div required instead of  required input will probably be more what you re looking for  if a little less elegant   This method doesn t require an additional input

User · Answer

For those who end up here  but have jQuery      javascript   jQuery    label required   append   lt span class  red-star  gt    lt  span gt        css  red-star   color  red

User · Answer

input required   select required        background-image  url   img star png        background-repeat  no-repeat      background-position-x  right      Image has some 20px space on the right not to overlap with select dropdown arrow    And it looks like this

User · Answer

What you need is  required selector - it will select all fields with  required  attribute  so no need to add any additional classes   Then - style inputs according to your needs  You can use   after  selector and add asterisk in the way suggested among other answers

User · Answer

x000D   x000D   asterisc   x000D    display  block  x000D    color  red  x000D    margin  -19px 185px  x000D    x000D   lt input style  width 200px  gt  x000D   lt span class  asterisc  gt   lt  span gt  x000D   x000D   x000D

User · Answer

required label       font-weight  bold     required label after       color   e32      content            display inline      Fiddle with your exact structure  http   jsfiddle net bQ859

User · Answer

input required       background-image  radial-gradient  F00 15   transparent 16    radial-gradient  F00 15   transparent 16        background-size  1em 1em      background-position  right top      background-repeat  no-repeat

User · Answer

write in CSS   form-group required  control-label after  content     color red     and HTML   lt div class  form-group required  gt        lt label class  control-label  gt Name  lt  label gt        lt input type  text  gt    lt  div gt

User · Answer

This example puts an asterisk symbol in front of a label to denote that particular input as a required field  I set the CSS properties using   and em to makesure my webpage is responsive  You could use px or other absolute units if you want to    x000D   x000D   name   x000D     display  inline-block  x000D     margin-left  40   x000D     font-size 25px  x000D       x000D    x000D   nameinput  x000D     margin-left  10px  x000D     font-size 90   x000D     width  17em  x000D      x000D    x000D   x000D   nameinput  placeholder   x000D    font-size  0 7em  x000D    vertical-align  middle  x000D    x000D   x000D   name p  x000D     margin 0  x000D     border 0  x000D     padding 0  x000D     display inline-block  x000D     font-size  40   x000D     vertical-align  super  x000D    x000D   lt label id  name  value  name  gt  x000D   lt p gt   lt  p gt   x000D  Name    lt input class  nameinput  type  text  placeholder  Enter your name  required gt  x000D   lt  label gt  x000D   x000D   x000D

User · Answer

I think this is the efficient way to do  why so much headache       lt div class  full-row  gt        lt label for  email-id  gt Email Address lt span style  color red  gt   lt  span gt  lt  label gt     lt input type  email  id  email-id  name  email-id   ng-model  user email   gt       lt  div gt

User · Answer

It is 2019 and previous answers to this problem are not using   CSS grid CSS variables HTML5 form elements SVG in CSS   CSS grid is the way to do forms in 2019 as you can have your labels preceding your inputs without having extra divs  spans  spans with asterisks in and other relics   Here is where we are going with minimal CSS     The HTML for the above    lt form action  https   www example com register   method  post  id  form-validate  enctype  multipart form-data  gt       lt p class  form-instructions  gt Please enter the following information to create your account  lt  p gt       lt label for  firstname  gt First name lt  label gt       lt input type  text  id  firstname  name  firstname  value    title  First name  maxlength  255  required    gt       lt label for  lastname  gt Last name lt  label gt       lt input type  text  id  lastname  name  lastname  value    title  Last name  maxlength  255  required    gt       lt label for  email address  gt Email address lt  label gt       lt input type  email  autocapitalize  off  autocorrect  off  spellcheck  false  name  email  id  email address  value    title  Email address  size  30  required    gt       lt label for  password  gt Password lt  label gt       lt input type  password  name  password  id  password  title  Password  required    gt       lt label for  confirmation  gt Confirm password lt  label gt       lt input type  password  name  confirmation  title  Confirm password  id  confirmation  required    gt       lt input type  checkbox  name  is subscribed  title  Subscribe to our newsletter  value  1  id  is subscribed  class  checkbox  gt       lt label for  is subscribed  gt Subscribe to the newsletter lt  label gt       lt input type  checkbox  name  persistent remember me  id  remember meGCJiRe0GbJ  checked  checked  title  Remember me  gt       lt label for  remember meGCJiRe0GbJ  gt Remember me lt  label gt       lt p class  required  gt   Required lt  p gt       lt button type  submit  title  Register  gt Register lt  button gt   lt  form gt    Placeholder text can be added too and is highly recommended   I am just answering this mid-form    Now for the CSS variables   --icon-required  url  data image svg xml    lt svg xmlns  http   www w3 org 2000 svg  width  100  height  100  viewBox  -10 -6 16 16  gt       lt line id  line  y1  -3  y2  3  stroke   23df0000  stroke-linecap  butt  transform  rotate 15   gt  lt  line gt       lt line id  line  y1  -3  y2  3  stroke   23df0000  stroke-linecap  butt  transform  rotate 75   gt  lt  line gt       lt line id  line  y1  -3  y2  3  stroke   23df0000  stroke-linecap  butt  transform  rotate -45   gt  lt  line gt     lt  svg gt      --icon-tick  url  data image svg xml    lt svg xmlns  http   www w3 org 2000 svg  xmlns xlink  http   www w3 org 1999 xlink  width  100  height  100  viewBox  -2 -2 16 16  gt                 lt path fill  green  stroke-linejoin  round  d  M2 6L1 7l3 4 7-10h-1L4 8z   gt     lt  svg gt       The CSS for the form elements   input type text  required   input type email  required   input type password  required   input type tel  required        background-image  var --icon-required       background-position-x  right      background-repeat  no-repeat      background-size  contain     input valid       --icon-required  var --icon-tick       The form itself should be in CSS grid   form       align-items  center      display  grid      grid-gap  var --form-grid-gap       grid-template-columns  var --form-grid-template-columns       margin  auto      The values for the columns can be set to 1fr auto or 1fr with anything such as  lt p gt  tags in the form set to span 1 -1  You change the variables in your media queries so that you have the input boxes going full width on mobile and as per above on desktop  You can also change your grid gap on mobile if you wish by using the CSS variables approach   When the boxes are valid then you should get a green tick instead of the asterisk   The SVG in CSS is a way of saving the browser from having to do a round trip to the server to get an image of the asterisk  In this way you can fine tune the asterisks  the examples here are at an unusual angle  you can edit this out as the SVG icon above is entirely readable  The viewbox can also be amended to place the asterisk above or below the centre

User · Answer

To put it exactly INTO input as it is shown on the following image      I found the following approach     asterisk input  after   content        color   e32  position  absolute   margin  0px 0px 0px -20px   font-size  xx-large   padding  0 5px 0 0           lt form gt       lt div gt                         lt input type  text  size  15    gt                                            lt span class  asterisk input  gt    lt  span gt                   lt  div gt               lt  form gt     Site on which I work  is coded using fixed layout so it was ok for me   I m not sure that that it s good for liquid design

User · Answer

Here is a simple  quot CSS only quot  trick I created and am using to dynamically add a red asterisk on the labels of required form elements without losing browsers  default form validation  The following code works perfectly on all the browsers and for all the main form elements   x000D   x000D   form-group     display  flex    flex-direction  column     label     order  1    text-transform  capitalize    margin-bottom  0 3em     input  select  textarea     padding  0 5em    order  2     input required label  after  select required label  after  textarea required label  after     content          color   e32    x000D   lt div class  form-group  gt     lt input class  form-control  name  first name  id  first name  type  text  placeholder  First Name  required gt     lt label class  small mb-1  for  first name  gt First Name lt  label gt   lt  div gt    lt br gt    lt div class  form-group  gt     lt input class  form-control  name  last name  id  last name  type  text  placeholder  Last Name  gt     lt label class  small mb-1  for  last name  gt Last Name lt  label gt   lt  div gt  x000D   x000D   x000D    Important  You must preserve the order of elements that is the input element first and label element second  CSS is gonna handle it and transform it in the traditional way  that is the label first and input second

[css] Use CSS to automatically add 'required field' asterisk to form inputs

Examples related to css

Examples related to forms

Examples related to validation

Examples related to standards