My HTML has a class called .required that is assigned to required fields.
Here is the HTML:
<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
<input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
<div class="form-group required">
<label class="col-md-2 control-label">Username</label>
<div class="col-md-4">
<input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
</div>
</div>
<div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label"> </label><div class="col-md-4"><div class="checkbox"><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>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-star"></span> Sign Me Up!
</button>
</div>
</div>
</form>
I added the following to my CSS;
.form-group .required .control-label:after {
content:"*";color:red;
}
Still that does not give a red * around the required fields. What am I missing here? Isn't there a direct way in Bootstrap 3 to introduce * to required fields?
EDIT
The * in terms and conditions does not appear immediately to a checkbox. How to fix this?
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>
Assuming this is what the HTML looks like
<div class="form-group required">
<label class="col-md-2 control-label">E-mail</label>
<div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>
To display an asterisk on the right of the label:
.form-group.required .control-label:after {
color: #d00;
content: "*";
position: absolute;
margin-left: 8px;
top:7px;
}
Or to the left of the label:
.form-group.required .control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -15px;
}
To make a nice big red asterisks you can add these lines:
font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;
Or if you are using Font Awesome add these lines (and change the content line):
font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";
.form-group .required .control-label:after should probably be .form-group.required .control-label:after. The removal of the space between .form-group and .required is the change.
use simple css,
.myform .required:after {
content: " *";
color: red;
font-weight: 100;
}
<form class="myform">
<div class="col-md-12">
<label for="xxx_fname" class="form-label required">First Name</label>
<input type="text" class="form-control" id="xxx_fname" >
</div>
<div class="col-md-12">
<label for="xxx_lname" class="form-label required">Last Name</label>
<input type="text" class="form-control" id="xxx_lname" >
</div>
</form
The other two answers are correct. When you include spaces in your CSS selectors you're targeting child elements so:
.form-group .required {
styles
}
Is targeting an element with the class of "required" that is inside an element with the class of "form-group".
Without the space it's targeting an element that has both classes. 'required' and 'form-group'
This CSS worked for me:
.form-group.required.control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -10px;
}
and this HTML:
<div class="form-group required control-label">
<label for="emailField">Email</label>
<input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>
This works for me:
CSS
.form-group.required.control-label:before{
content: "*";
color: red;
}
OR
.form-group.required.control-label:after{
content: "*";
color: red;
}
Basic HTML
<div class="form-group required control-label">
<input class="form-control" />
</div>
I modified the css, as i am using bootstrap 3.3.6
.form-group.required label:after{
color: #d00;
font-family: 'FontAwesome';
font-weight: normal;
font-size: 10px;
content: "\f069";
top:4px;
position: absolute;
margin-left: 8px;
}
the HTML
<div class="form-group required">
<label for="return_notes"><?= _lang('notes') ?></label>
<textarea class="form-control" name="return_notes" id="return_notes" required="required"></textarea>
</div>
Related
I am having issues trying to make this form responsive. Whenever I make my screen smaller, my form won't resize. I am using bootstrap, but I am not sure how to make that happen. I also don't know how to align "email" label with the other labels.
<html>
<head>
<title>Title</title>
</head>
<style>
#myform {
border: 1px outset #ccc;
background: #fff repeat-x;
padding: 50px;
margin: 20px auto;
width: 500px;
height: 450px;
font-size: 14px;
-moz-border-radius: 4px;
}
#myform h3 {
text-align: left;
margin: 0 0 10px 0;
}
#inputs label,
#inputs input,
#inputs textarea,
#inputs select {
display: block;
width: 300px;
float: left;
margin-bottom: 10px;
}
#inputs input {
height: 40px;
}
#inputs label {
text-align: right;
width: 75px;
padding-right: 20px;
}
#inputs br {
clear: left;
}
#agree {
font-size: 10.5px;
}
</style>
<body>
<div class="container">
<form id="myform" action="#">
<h3>Your Information</h3>
<div id="inputs">
<!-- username -->
<label for="username">Firstname</label>
<br/>
<input id="username" type="text" placeholder="Fullname" /><br />
<!-- password -->
<label for="password">Password</label>
<br/>
<input id="password" type="password" placeholder="Password" />
<br />
<!-- email -->
<label for="email">Email </label>
<br/>
<input id="email" type="text" placeholder="Email" />
</div>
<p>
<button type="button" class="btn btn-primary btn-lg btn-block">
Proceed
</button>
</p>
<label id="agree">
By registering you agree to Elephant's Terms of Service and Privacy Policy.
<input type="checkbox" id="check" title="Required to proceed" />
</label>
</form>
</div>
<body>
</html>
As you already use bootstrap take advantage of bootstrap css classes. Here is official documentation about forms (https://v4-alpha.getbootstrap.com/components/forms/). One of form solution would be:
<form class="form-horizontal">
<fieldset>
<!-- Form Name -->
<legend>Form Name</legend>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="username">username:</label>
<div class="col-md-4">
<input id="username" name="username" type="text" placeholder="Username" class="form-control input-md" required="">
</div>
</div>
<!-- Password input-->
<div class="form-group">
<label class="col-md-4 control-label" for="password">password:</label>
<div class="col-md-4">
<input id="password" name="password" type="password" placeholder="password" class="form-control input-md" required="">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-md-4 control-label" for="email">email:</label>
<div class="col-md-4">
<input id="email" name="email" type="text" placeholder="email" class="form-control input-md" required="">
</div>
</div>
<!-- Multiple Checkboxes -->
<div class="form-group">
<label class="col-md-4 control-label" for="checkboxes"></label>
<div class="col-md-4">
<div class="checkbox">
<label for="checkboxes-0">
<input type="checkbox" name="checkboxes" id="checkboxes-0" value="1">
By registering you agree to Elephant's Terms of Service and Privacy Policy.
</label>
</div>
</div>
</div>
<!-- Button -->
<div class="form-group">
<label class="col-md-4 control-label" for="singlebutton">Single Button</label>
<div class="col-md-4">
<button id="singlebutton" name="singlebutton" class="btn btn-primary">Button</button>
</div>
</div>
</fieldset>
</form>
I am trying to use sr-only class from bootstrap in order to make an inline form.
It should be something like this:
Title Cost
________________ __________ ______ days at $ ______ X (remove button)
I have already searched in lots of places but couldn't find a solution for this.
<form>
<div class="form-group col-sm-5">
<label for="name" class="control-label">Title</label>
<input type="email" value='' class="form-control" id="name" placeholder="Title" />
</div>
<div class="form-group col-sm-2">
<input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> days
</div>
<div class="form-group col-sm-2">
<input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> /day
</div>
</form>
Example
The class .sr-only has position:absolute style. But you can define you own class. Using margin-top or height. See this example i've made for you, so you can have an idea (See the snippet in fullpage option):
.form-group > .sr-only.control-label {
display: block;
position: relative;
height: 27px;
}
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<form>
<div class="form-group col-sm-5">
<label for="name" class="control-label">Title</label>
<input type="email" value='' class="form-control" id="name" placeholder="Title" />
</div>
<div class="form-group col-sm-2">
<label class="sr-only control-label" for="exampleInputEmail3">&bnsp;</label>
<div class="input-group">
<input type="email" value='' class="form-control" id="name" placeholder="Ime" >
<div class="input-group-addon">days</div>
</div>
</div>
<div class="form-group col-sm-2">
<label class="sr-only control-label" for="exampleInputEmail3">&bnsp;</label>
<div class="input-group">
<input type="email" value='' class="form-control" id="name" placeholder="Ime" >
<div class="input-group-addon">days</div>
</div>
</div>
</form>
Use the following CSS. I added a class to the form in order to differentiate it from regular forms and removed the col classes from the groups, assuming they float the columns.
.inline-form .form-group {
display: inline-block;
vertical-align: bottom;
}
.inline-form label {
display: block;
}
.inline-form input {
border: none;
border-bottom: solid 1px;
}
<form class="inline-form">
<div class="form-group">
<label for="name" class="control-label">Title</label>
<input type="email" value='' class="form-control" id="name" placeholder="Title" />
</div>
<div class="form-group">
<input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> days
</div>
<div class="form-group">
<input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> /day
</div>
</form>
What I need is, the textbox inside the first occurrence of class ".has-error" to be highlighted in red. I tried to nest the :nth-of-type selector as below. It works only when the div with id "name" has the "has-error" class. But I doesn't work in other scenarios. Can someone please explain me the reason why it is not working?
.fields input[type="text"] {
color: #000;
border: 1px solid #000;
}
.fields > .error:nth-of-type(1) > .has-error:nth-of-type(1) input[type="text"] {
color: #f00;
border-color: #f00;
}
<div class="fields">
<div class="col error">
<div id="name" class="input">
<input type="text" name="name" />
</div>
<div id="email" class="input has-error">
<input type="text" name="email" />
</div>
</div>
<div class="col error">
<div id="age" class="input has-error">
<input type="text" name="age" />
</div>
<div id="phone" class="input has-error">
<input type="text" name="phone" />
</div>
</div>
</div>
nth-of-type matches only elements and not class names.
Why .form-group-sm reduces a .form-control but not a .control-label except when inside a .form-horizontal? This forces a custom css or the use of <small> tag with the <label> tag. Is it by design or a missing?
From bootstrap.css:
.form-group-sm .form-control { ... }
.form-horizontal .form-group-sm .control-form { ... }
Sample code:
<form class="form-horizontal">
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>
Hi its a very basic question i just want to know when hover on one element the style of other changes how can I achieve this ?
<form id="numerical" class="row">
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
Like when i hover on button border-color of all the input changes.
I only want this with css no js or jQuery.
It is possible to do this but not with your current code.
Below is code of this working, the hover element will have to be before the elements you want to change. It works by going down and not up, so if this button is at the bottom you will not be able to see the same effect as the effect does not effect elements that are already rendered.
button:hover ~ div input {
border: 1px solid red;
}
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
We can select other elements siblings by using the ~ selector.
The ~ combinator separates two selectors and matches the second
element only if it is preceded by the first, and both share a common
parent.
More here
Here is the button at the bottom, as you can see it will not work.
button:hover ~ div input {
border: 1px solid red;
}
<form id="numerical" class="row">
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
for a pure css solution you need to move the <button>-tag in front of the inputs you want to change, but then it'll work like this
button:hover ~ .form-group input {
border-color: red;
}
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
that is possible only if the inputs after the button
<form id="numerical" class="row">
<button type="submit" id="btn" class="row">Submit</button>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
</form>
and the css:
#btn:hover ~ .form-group input {
background: #000;
}
after that you can use position absolute for the button
and this is demo
http://jsfiddle.net/u7tYE/6037/
try this
<form id="numerical" class="row">
<label for="btn" class="label"></label>
<div class="form-group row">
<label>Enter Number :</label>
<input type="text" id="tel">
</div>
<div class="form-group row">
<label>Result :</label>
<input type="text" id="result">
</div>
<button type="submit" id="btn" class="row">Submit</button>
</form>
<style>#numerical{
position: relative;
}
.form-group {
margin-bottom:10px;
}
#numerical .label {
position: absolute;
bottom: 0;
left: 0;
height: 32px;
width:102px;
}
.label:hover ~ .form-group input {
border: solid 2px red;
}
#btn{
background:blue;
color:#fff;
height:30px;
width:100px;
} </style>
Fiddle