Use CSS to automatically add 'required field' asterisk to form inputs
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">
Adding an asterisk BEFORE the colon on a required form label
Assuming you can modify the HTML, you can just insert a <span>
tag around the colon, and then use the target .required span:before
:
.required span:before { content: "*"}
<li class="form-row"> <label class="required" for="first-name">First Name<span>:</span></label> <input type="text" placeholder="John" required/></li>
Adding a red asterisk to required fields
Rather than ::before
use ::after
and remove the float: right
.
::before
places a pseudoelement before the element you're selecting. ::after
will place it after, so rather than putting the asterisk before the element you want and moving it with a float/position you can just place it after naturally.
The reason the asterisk was moved too far to the right is because floating moves the element to the right side of the parent container (not always the parent element, let me know if you want me to elaborate). So by floating right you were telling it to move to the far right of the label container which means just to the left of the text boxes, and not to the right of the label text.
https://jsfiddle.net/h4depmdf/1/
.required-field::after {
content: "*";
color: red;
}
Add asterisk on required field with pseudo element
If the markup can be adjusted input
first, label
second, it can be done with sibling selectors either using +
or ~
.
input:required + label:after { content: " * "; color: red;}
<input type="text" required><label>Label</label>
Adding asterisk to required fields in Bootstrap 3
Use .form-group.required
without the space.
.form-group.required .control-label:after {
content:"*";
color:red;
}
Edit:
For the checkbox you can use the pseudo class :not(). You add the required * after each label unless it is a checkbox
.form-group.required:not(.checkbox) .control-label:after,
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
content:"*";
color:red;
}
Note: not tested
You should use the .text class or target it otherwise probably, try this html:
<div class="form-group required">
<label class="col-md-2 control-label"> </label>
<div class="col-md-4">
<div class="checkbox">
<label class='text'> <!-- use this class -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
Ok third edit:
CSS back to what is was
.form-group.required .control-label:after {
content:"*";
color:red;
}
HTML:
<div class="form-group required">
<label class="col-md-2"> </label> <!-- remove class control-label -->
<div class="col-md-4">
<div class="checkbox">
<label class='control-label'> <!-- use this class as the red * will be after control-label -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
Add an asterisk to a label if field is required
I don't really know Angular…
But I would say you can do something like this, using pseudo-element ::after
:
label { border: 1px solid gray; padding: 4px 8px;}
label.asterisk-if-mandatory::after { content: " *";}
<label class="asterisk-if-mandatory">Item is mandatory</label><label class="">Item is not mandatory</label><label class="asterisk-if-mandatory">Item is mandatory</label>
Related Topics
Stretch Child Div Height to Fill Parent That Has Dynamic Height
How to Make an Element Fill the Remaining Viewport Height
2 Column Div Layout: Right Column With Fixed Width, Left Fluid
Why Is a Flex Item Limited to Parent Size
Why Aren't My Grid-Template-Areas With Ascii Art Not Working
How to Float 3 Divs Side by Side Using Css
How to Target Only Ie (Any Version) Within a Stylesheet
Black Transparent Overlay on Image Hover With Only Css
How to Suppress Spacing Between Paragraphs of the Same CSS Class
How to Fix Invalid Request (Unsupported Ssl Request)
Canvas Has White Space At the Bottom and Scrolls Too Far
Difference Between Visibility:Hidden and Display:None
Stretch and Scale a CSS Image in the Background - With CSS Only
Css Center Display Inline Block