Bootstrap 3 - Add an asterisk to the input on the same row
Demo Fiddle
Try using:
.form-group div{
position:relative;
margin-right:15px;
}
.form-group div:after{
position:absolute;
content:'*';
color:red;
right:-10px;
top:0;
}
nb. You also hadnt closed one of your div tags in your posted code.
Bootstrap Placing Asterisk next to input textbox
In Twitter Bootstrap the grid system doesn't only work once for the entire width of your page, but also within individual col
blocks, ie. once you define col-lg-3
you then have an additional 12 col
blocks inside that block dividing the space into 12 smaller parts. Use it whichever way you like, ie dividing 8-4 (as in the below example - I recommend opening the snippet in Full page view), or any other, just make sure it's 12 in total.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div id="propertyidsearch"> <div class="col-lg-3"> <div class="col-lg-8"> <input type="text" name="searchValue" maxlength="2000" size="40" value="" class="form-control input-sm"> </div> <div class="col-lg-4"> <span style="color:red;">*</span> </div> </div> <div class="col-lg-3"> <button type="button" class="btn-u btn-default margin-bottom-10" id="name" name="name">OWNER NAME</button> </div> <div class="col-lg-3"> <button type="button" class="btn-u btn-default margin-bottom-10" id="location" name="location">PROPERTY ADDRESS</button> </div> <div class="col-lg-3"> <button type="button" class="btn-u btn-default margin-bottom-10" id="billingAddress" name="billingAddress">BILLING ADDRESS</button> </div> </div>
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>
how to add asterisk after input field and the position same after zoom in
Just position the asterisk after the field using ::after
. It should stay in the same position when the user zooms in.
.required::before { position: absolute; left: -10px; top: 0; content: '*'; color: red;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><form class="well form-horizontal" action=" " method="post" id="user_edit"> <div class="form-group">
<div class="col-md-8 inputGroupContainer "> <div class="input-group required"><span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i></span> <input type="text" placeholder="First Name" class="form-control" name="first_name" value='' id="first_name" maxlength="50" /> </div> </div> </div> </form>
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">
Bootstrap input-group-addon alignment issue when a span is added for required asterisks
It looks like the problem is that you put a <label>
inside the input-group
but only input-group-addon
, input-group-btn
and form-control
should be inside the input-group
. That <label>
is forcing the icons to stretch to accommodate the label. So I removed the <label>
and put it outside the input-group
. After I did that, the asterisk addon worked fine.
Here is a fiddle with my changes: https://jsfiddle.net/ezvzvvqg/18/
Here it is in Stack Snippet form:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/js/bootstrap-datepicker.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.1/css/bootstrap-datepicker3.css" rel="stylesheet"/><table class="table table-user-information" style="font-size:12px;"> <tbody> <tr> <td class="tdPopupTextDescription">Effective Date:</td> <td id="tdEffectiveDate"> <div id="divDatePickerEffectiveDate" class="input-group date" data-provide="datepicker" data-date-show-on-focus="true"> <input type="text" class="form-control required error" id="txtEffectiveDate" maxlength="10" style="display:inline;"> <div class="input-group-addon"> <span class="glyphicon glyphicon-th"></span> </div> <span class="input-group-addon" id="sizing-addon1"><span id="spanAstreisk" class="glyphicon glyphicon-asterisk requiredAsterisk"></span></span> </div> <label for="txtEffectiveDate" generated="true" class="error">This field is required.</label>
</td> </tr> </tbody></table>
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;
}
Related Topics
Jw Player: Cross-Browser "Display:None" Player Behavior
How to Center Align a Child Div Inside a Parent Div with CSS
CSS Not Working on Django Password Form Field
Move Multiple Backgrounds Infinitely Using CSS
What Is Better: CSS Media Queries or Jquery Mobile
What Is the Best Method for Tidying CSS
How to Tell Gulp to Skip or Ignore Some Files in Gulp.Src([...])
Distorted Spacing Between Div Elements After Sorting with Jqui_Sortable
Flexbox Vertical Align Child Top, Center Another
Margin Behavior of "Overflow:Hidden" Div After Floating Div on Webkit
Convert Internal Stylesheet to Inline CSS
Change All Variable Value Based on Body Class
Chrome Cut Off Oswald-Light Font
Different Timing Functions for Different Parts of CSS3 Keyframe Animation? (Accurate Bounce)