<div class='ur-form-row'>
<div class="ur-form-grid ur-grid-1"
style="width:99%">
<div class="ur-field-item field-user_login">
<p class="form-row validate-required"
id="user_login_field" data-priority=""><label
for="user_login">Username <abbr class="required"
title="required">*</abbr></label><input data-rules=""
data-id="user_login" type="text" class="input-text input-
text ur-frontend-field " name="user_login" id="user_login"
placeholder="" value="" required="required" data-
label="Username" /></p>
</div>
I want to apply css border-radius to this class but it doesn't work
Tried all the options above such as:
.ur-form-row {border-radius: 20px;}
give border and border-radius to input-text class
.input-text
{
border: 1px solid;
border-radius: 26px;
}
<div class='ur-form-row'>
<div class="ur-form-grid ur-grid-1"
style="width:99%">
<div class="ur-field-item field-user_login">
<p class="form-row validate-required"
id="user_login_field" data-priority=""><label
for="user_login">Username <abbr class="required"
title="required">*</abbr></label><input data-rules=""
data-id="user_login" type="text" class="input-text input-
text ur-frontend-field " name="user_login" id="user_login"
placeholder="" value="" required="required" data-
label="Username" /></p>
</div>
here it is. just add this CSS to end of your style and add "makeRadius" to your input class.
.makeRadius {
border-radius: 8px 8px 8px 8px;
}
<input data-rules=""
data-id="user_login" type="text" class="input-text input-
text ur-frontend-field makeRadius" name="user_login" id="user_login"
placeholder="" value="" required="required" data-
label="Username" />
Try adding border before radius to the element
.ur-form-row input {
border:1px solid black;
border-radius: 20px;
}[it works fine check the image](https://i.stack.imgur.com/qrWq4.png)
Related
I am trying to add a bottom border to all but the last direct children of a form by using the following styling block:
But all the children of the form seem to match the :last-child selector.
Here is my code:
.form-for:not(:last-child) > div {
border-bottom: 1px solid #6d6e71;
}
<form class="form-for">
<div>
<div class="form-group">
<label class="form-for-label">Name</label>
<input type="text" name="Name" value="" placeholder="Name">
</div>
</div>
<div>
<div class="form-group">
<label class="form-for-label">Description</label>
<input type="text" name="Description" value="" placeholder="Description">
</div>
</div>
<div>
<div class="form-group">
<label class="form-for-label">Creation Date</label>
<input type="text" name="Creation Date" value="" placeholder="Creation Date">
</div>
</div>
</form>
It might be important to mention that this form is dynamically generated using the react-form-for-object library.
If you only want to select direct children you can use parent > child:
.form-for>div:not(:last-of-type)>div {
border-bottom: 1px solid #6d6e71;
}
<form class="form-for">
<div>
<div class="form-group">
<label class="form-for-label">Name</label>
<input type="text" name="Name" value="" placeholder="Name">
</div>
</div>
<div>
<div class="form-group">
<label class="form-for-label">Description</label>
<input type="text" name="Description" value="" placeholder="Description">
</div>
</div>
<div>
<div class="form-group">
<label class="form-for-label">Creation Date</label>
<input type="text" name="Creation Date" value="" placeholder="Creation Date">
</div>
</div>
<input type="submit" />
</form>
try this :)
.form-for > div:not(:last-child) {
border-bottom: 1px solid #6d6e71;
}
another solution (optional)
.form-for > div {
border-bottom: 1px solid #6d6e71;
}
.form-for > div:last-child {
border-bottom: 0px solid #fff;
}
I am trying to create a form in my website for people to able to put phone number and submit the form. But when I type alphabets instead of numbers, it still accepted. Is there anyway I can check phone validation using Bootstrap 3?
Here is my code
<footer>
<hr>
<div class="container text-center">
<h3>Subscribe for special offer</h3>
<p>Enter your information</p>
<form action="" class="form-inline">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Name" required="required">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" required="required">
</div>
<div class="form-group">
<label for="phone_no">Phone Number</label>
<input type="text" name="num" data-validation="number" data-validation-allowing="negative,number" input name="color" data-validation="number" datavalidation-ignore="$" required="required" class="form-control" id="phone_no" placeholder="Phone Number">
</div>
<button type="submit" class="btn btn-default">Subscribe</button>
<hr>
</form>
<!--End form-->
<hr>
</div>
<!--End Container-->
</footer>
You can use it using the pattern attribute. You can generate a pattern from this link.
HTML:
<form>
<h2>Phone Number Validation</h2>
<label for="phonenum">Phone Number (format: xxxx-xxx-xxxx):</label><br/>
<input id="phonenum" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required >
<input type="submit" value="Submit">
<p class="p">Demo by Agbonghama Collins. See article.</p>
</form>
CSS:
input[type="tel"] {
border: 1px solid #ddd;
padding: 4px 8px;
}
input[type="tel"]:focus {
border: 1px solid #000;
}
input[type="submit"] {
font-weight: bold;
padding: 4px 8px;
border:1px solid #000;
background: #3b5998;
color:#fff;
}
form {
width: 50%;
margin: 0 auto;
}
.p {
padding-top: 30px;
}
Fiddle here.
Bootstrap doesn't provide any form validation system.
You can use a little trick to allow only numbers or you can use one of the available JavaScript plugins (for example http://formvalidation.io/).
<input type="text" onkeypress="return event.charCode >= 48 && event.charCode <= 57" required>
<input type="text" name="num" data-validation="number"
data-validation-allowing="negative,number" input name="color"
data-validation="number" datavalidation-ignore="$" required="required" class="form-control"
id="phone_no" placeholder="Phone Number" maxlength="6" pattern="\d*">
While button is being clicked, it won't allow it to submit it, until it is 6 digit and numerical.
Change type="text" to type="number".
Also you can use Masks: https://igorescobar.github.io/jQuery-Mask-Plugin/
I am new on here and would really appreciate some help, I am trying to format an input form with css however the the form has a text area that I need to format to the same as the rest of the form.
Here is what I have so far:
<div id="login">
<h2>Data Archive</h2>
<hr/>
<form action="" method="post">
<label>HDD Name :</label>
<input type="text" name="hdd_name" id="hdd_name" required="required" placeholder="Please enter HDD name"/><br /><br />
<label>Date Archived :</label>
<input type="text" name="date_archived" id="date_archived" required="required" placeholder="Date data was archived"/><br/><br />
<label>Project Name :</label>
<input type="text" name="project_name" id="project_name" required="required" placeholder="Project name"/><br/><br />
<label>Client :</label>
<input type="text" name="client" id="client" required="required" placeholder="Client name"/><br/><br />
<label>Archived by :</label>
<input type="text" name="archived_by" id="archived_by" required="required" placeholder="Name of person archiving data"/><br/><br />
<label>Editor :</label>
<input type="text" name="editor" id="editor" required="required" placeholder="Editor name"/><br/><br />
<label>Other information :</label>
<div class="textarea"><textarea name="other_information" id="other_information" wrap="virtual"/>Any other information</textarea><br/><br /> </div>
<input type="submit" value=" Submit " name="submit"/><br />
</form>
</div>
and the CSS:
textarea{
width: 290px;
height: 75px;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
}
#login{
width:300px;
float: left;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 25px;
margin-top: 70px;
}
Really hoping you can shed some light on this for me.
You need to give each item that you want to be the same a CSS class.
<input class="mytextboxes" type="text" ... />
<textarea class="mytextboxes" name="other_information" ... />Any other information</textarea>
Then you can use the CSS class like this:
.mytextboxes{
/* styling here */
}
Here's a tutorial from W3 schools to get you started.
http://www.w3schools.com/cssref/sel_class.asp
You can do the styling of inputs of type by using a CSS like this.
input[type="text"] {
/* Your styles*/
}
hello i'm creating a login form .but my check box and term text related to it not positioning correctly .i have add <br> tag but no effect .i tried clearfix it's not work either.here is the fiddle preview.
this is my html code
<div class="mainlog">
<form>
<label class="la" for="xname">Name</label><input name="xname" class="in" value="" type="text"><br>
<label class="la" for="xemail">Email</label><input name="xemail" class="in" value="" type="text"><br>
<label class="la" for="xpass">password</label><input name="xpass" class="in" value="" type="text"><br>
<label class="la" for="xpasscon">confirm</label><input name="xpasscon" class="in" value="" type="text"><br>
<input type="checkbox" name="term"/><label class="lb" for="term" >I have read and agree to the Terms of Use and the Privacy Policy</label><br>
<input type="submit" value="Sign Up" />
</form>
</div>
Wrap the checkbox and text in a div and float it left. Avoid the usage of <center> it will not be supported in HTML5
.mainlog {
width: 450px;
height: 250px;
border: 5px solid #DBDBDB;
border-radius: 5px;
padding: 20px;
}
.in {
padding: 8px;
border: 1px solid #DFDFDF;
width: 250px;
float: left;
margin-bottom: 10px;
border-radius: 5px;
}
.la {
width: 120px;
float: left;
text-align: left;
text-transform: uppercase;
color: #6B6B6B;
clear: both;
}
.lb {} .checkbox {
float: left;
}
}
<center>
<div class="mainlog">
<form>
<label class="la" for="xname">Name</label>
<input name="xname" class="in" value="" type="text">
<br>
<label class="la" for="xemail">Email</label>
<input name="xemail" class="in" value="" type="text">
<br>
<label class="la" for="xpass">password</label>
<input name="xpass" class="in" value="" type="text">
<br>
<label class="la" for="xpasscon">confirm</label>
<input name="xpasscon" class="in" value="" type="text">
<br>
<div class="checkbox">
<input type="checkbox" name="term" />
<label class="lb" for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
<br />
</div>
<input type="submit" value="Sign Up" />
</form>
</div>
</center>
Quick fix: wrapp checkbox with it's label into div with class "width".
Then in CSS add ".width" with styles: width:100%; clear:both.
.width{
width:100%;
clear:both;
}
Demo
I did a minor change in your code and it looks good to me. I am not sure if this is what you were looking for.
Please check the fiddle here.
These were the changes I made.
HTML:
<div class="lb"> <!-- added class "lb" to <div> and removed it from <label> -->
<input type="checkbox" name="term" />
<label for="term">I have read and agree to the Terms of Use and the Privacy Policy</label>
</div>
CSS:
.lb {
float:left; /* Floats the element to left */
}
I hope this works for you. :)
P.S. I have removed all the <br> tags inside the <form>
I have a simple form with two columns and a field that consists of three inputs (see attached image)
The two columns are floated right.
I need to add a dash between the fields in "Adószám". I tried it with :before pseudo class but it didn't display anything. If I just add it to the HTML markup, the fields are wrapped to the next line.
Here is my HTML:
<div id="column1">
<label for="name">Név:<br /><input type="text" id="name" name="name" /></label>
<label for="pass">Jelszó:<br /><input type="text" id="pass" name="pass" /></label>
<input type="checkbox" id="accept" name="accept" value="1" /> Elfogadom a feltételeket
</div>
<div id="column2">
<label for="email">E-mail cím:<br /><input type="text" id="email" name="email" /></label>
<label for="taxno1">Adószám:<br />
<input type="text" id="taxno1" name="taxno1" />
<input type="text" id="taxno2" name="taxno2" />
<input type="text" id="taxno3" name="taxno3" />
</label>
And my CSS:
#column1 {
margin-right: 50px;
display: inline-block;
width: 270px;
float: left;
}
#column2 {
display: inline-block;
width: 270px;
float: left;
}
label {
font-weight: bold;
/*display: inline-block;*/
}
input {
width: 255px;
/*display: inline-block;*/
height: 28px;
border: 1px solid #c3c6d1;
background-color: #eaecf2;
margin: 5px 0 5px 0;
font-size: 15px;
padding: 5px;
}
#taxno1 {
width: 82px;
}
#taxno2, #taxno3 {
width: 46px;
margin-left: 23px;
}
please review this code
<div id="column1">
<label for="name">Név:<br /><input type="text" id="name" name="name" /></label>
<label for="pass">Jelszó:<br /><input type="text" id="pass" name="pass" /></label>
<input type="checkbox" id="accept" name="accept" value="1" /> Elfogadom a feltételeket
</div>
<div id="column2">
<label for="email">E-mail cím:<br /><input type="text" id="email" name="email" /></label>
<label for="taxno1">Adószám:<br />
<input type="text" id="taxno1" name="taxno1" /> -
<input type="text" id="taxno2" name="taxno2" /> -
<input type="text" id="taxno3" name="taxno3" />
</label>
#taxno2, #taxno3 {
width: 46px;
margin-left: 10px;
}
Demo here http://jsfiddle.net/z9b5S/
you have to wrap the input inside a span and then giving a class to span element it will work.
<div id="column2">
<label for="email">E-mail cím:<br /><input type="text" id="email" name="email" /></label>
<label for="taxno1">Adószám:<br />
<span class="add"><input type="text" id="taxno1" name="taxno1" /></span>
<span class="add"><input type="text" id="taxno2" name="taxno2" /></span>
<span class="add"><input type="text" id="taxno3" name="taxno3" /></span>
</label>
</div>
And add this class in your CSS file.
.add:after
{
content: "/";
}
.add:last-child:after{
content: " ";
}
A working Demo link is here.. http://jsbin.com/qeduhogi/3/