I've been working on my site w/c uses built html editor that I can use and I am trying to copy the styles of the form on this page: https://imsc.clickfunnels.com/auto-webinar-registration10074792
Here is my current work in JSFIDDLE: https://jsfiddle.net/su5rr2nh/1/
However I am not sure why I can't get the exact styles including the height, width of the textboxes and select/dropdown element. As you can see the images doesn't go inside the textboxes and also my buttons doesnt look the same.
Heres my codes:
<div style="padding: 40px; background-color: rgba(243, 242, 242, 0.611765); border: 3px dashed rgba(0,0,0,0.7);">
<h1 style="font-size: 32px; text-align: center; font-weight: bold;">FREE BONUS!</h1>
<h4 style="font-size: 18px; color: rgba(47, 47, 47, 0.6); text-align: center;">Reserve your seat TODAY for this free training, and we will send you our <span style="font-weight: bold;">Amazon's Secret Business Cheatsheet</span> that will get you up and running in NO TIME!</h4>
<input id="name" style="border-radius: 5px !important; padding: 10px 90px; margin-top: 10px;" name="name" type="text" placeholder="Your Name.." />
<img src="http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/02/name2.png"/>
<input id="email" style="border-radius: 5px !important; padding: 10px 90px; margin: 10px;" name="email" type="email" placeholder="Your Email.."/>
<img src="http://beaminggeek.com/profitbuilder/wp-content/uploads/2017/02/email2.png"/>
<select style="border-radius: 5px !important; padding: 10px 90px; margin: 10px;">
<option value="desired">Select Desired Date</option>
<option value="yesterday">Watch Yesterday's Broadcast Now</option>
<option value="feb8th">Wednesday, Feb 8th, 2017</option>
<option value="feb8th">Wednesday, Feb 8th, 2017</option>
</select>
<button style="padding: 13px 35px; margin-right: auto; margin-left: auto; color: #fff; font-weight: bold; display: inline-block; -ms-transform: all .2s ease-in-out; -webkit-transform: all .2s ease-in-out; transform: all .2s ease-in-out; text-align: center !important; text-decoration: none !important; background-color: #ea6645;">Register Your Spot Now! * seats are extremely limited *</button>
<p>* we will not spam, rent or sell your information *</p>
<p>Your Local Time: 4:18 PM</p>
</div>
I am tyring my best to copy every styles but its not going yet there. Any help to check what am I missing? Feel free to modify my jsfiddle if you want. I just want to copy the styles of it. I already use chromes inspector element but too many codes there.
Please help.
UPDATE AND EXPLANATION
//text-align: left; sets the text start at the left of the input.
//border: 1px solid rgba(0,0,0,0.2); sets a border with 1px solid design, in the color black, with an alpha value of 0.2
//box-shadow: 0 0 0 3px rgba(0,0,0,0.5); sets a shadow at the bottom of the input with 3px height and black color with an alpha value of 0.5
//background-color: #fff; sets the background of the input to white
//border-radius: 5px; rounds the corners of the input
//background-position: 96%; sets the background at 96% of the input. (allmost right)
//background-image: url(https://appassets1.clickfunnels.com/images/name2.png); sets the background to the image, that is found at the URL.
//background-repeat: no-repeat; sets the background to no repeat. Each background would repeat, until the end of the element. We only want the background once. so we dont to repeat it.
//appearance: none; some browsers let elements appear custom. we dont want it.
//padding: 12px 18px; to size up the input a bit. otherwise the text would hit top, left, bottom.
//font-size: 16px; sets the text size to 16px.
//width: calc(100% - 36px); calculates the with of the input. 100% for the whole area. -36px for the padding(18px) that we added to the right and left of the input.
<input type="text" placeholder="Enter Your Name..." name="name" data-type="extra" style="text-align: left; border: 1px solid rgba(0,0,0,0.2); box-shadow: 0 0 0 3px rgba(0,0,0,0.05); background-color: #fff; border-radius: 5px; background-position: 96%; background-image: url(https://appassets1.clickfunnels.com/images/name2.png); background-repeat: no-repeat; appearance: none; padding: 12px 18px; font-size: 16px; width: calc(100% - 36px);">
Related
I am trying to give a custom input field (file upload) rounded corners.
I am using the same CSS as on all my other input fields (text, number, password) on the same form where this works fine but am unable to apply to same to the field below.
I tried on the input field, on the spans and on the div as well as with a class and with inline CSS but nothing works here (on all other fields I just apply it on the input and it works fine).
Can someone tell me how to fix this ?
.rounded2l {
border-radius: 25px 0px 0px 25px;
}
.rounded2r {
border-radius: 0px 25px 25px 0px;
}
.rounded4 {
border-radius: 25px;
}
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input cursor-pointer" id="attachment" name="attachment"/>
<label for="attachment" class="custom-file-label cursor-pointer rounded4">
<span class="rounded2r">Attachment</span>
</label>
</div>
</div>
**Update:**
Added the CSS classes the way I was closest to what I need.
This gives me rounded corners on the left but not on the right side of the field.
The easiest way to fix this is to hide the native UI (input type="file") and format the label as if it were a button.
.rounded2l {
border-radius: 25px 0px 0px 25px;
}
.rounded2r {
border-radius: 0px 25px 25px 0px;
}
.rounded4 {
border-radius: 25px;
}
input[type=file] {
display: none;
}
.file-upload {
margin: 1rem;
border-radius: 25px;
background-color: #006600;
color: #fff;
padding: 0.5rem;
cursor: pointer;
}
<div class="form-group">
<div class="custom-file">
<input type="file" class="custom-file-input cursor-pointer" id="attachment" name="attachment"/>
<label for="attachment" class="file-upload" class="custom-file-label cursor-pointer rounded4">
<span class="rounded2r">Upload Attachment</span>
<span id="filename"></span>
<!-- insert filename using javaScript when file has uploaded -->
</label>
</div>
</div>
They are rounded, but you don't see them.
Maybe you use a background-color in your css to "see" how the elements have rounded corners.
First set
.rounded4 {
border-radius: 25px;
background-color: lime;
}
The label has all corners rounded.
The set:
.rounded2r {
border-radius: 0px 25px 25px 0px;
background-color: pink;
}
The span inside has 2 on the right side.
to apply CSS to input tag you will need to apply it directly to this input using
input[type=file]
or as in your case, you can add it to any of the classes you have at the CSS style file like this
.rounded2l,
input[type=file]{
border-radius: 25px 0px 0px 25px;
border: 1px solid #000;
}
hope this help
I'm using Bootstrap for my JSP page.
I want to use <fieldset> and <legend> for my form. This is my code.
<fieldset class="scheduler-border">
<legend class="scheduler-border">Start Time</legend>
<div class="control-group">
<label class="control-label input-label" for="startTime">Start :</label>
<div class="controls bootstrap-timepicker">
<input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
<i class="icon-time"></i>
</div>
</div>
</fieldset>
CSS is
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
}
I am getting output like this
I want output in the following way
I tried adding
border:none;
width:100px;
to legend.scheduler-border in CSS. And I'm getting the expected output. But the problem is I would like to add another <fieldset> for another fields. That time the width of text in legend is a problem as it is lengthier than than 100px.
So what shall I do to get output like I have mentioned? (Without striking the legend text)
That's because Bootstrap by default sets the width of the legend element to 100%. You can fix this by changing your legend.scheduler-border to also use:
legend.scheduler-border {
width:inherit; /* Or auto */
padding:0 10px; /* To give a bit of padding on the left and right */
border-bottom:none;
}
JSFiddle example.
You'll also need to ensure your custom stylesheet is being added after Bootstrap to prevent Bootstrap overriding your styling - although your styles here should have higher specificity.
You may also want to add margin-bottom:0; to it as well to reduce the gap between the legend and the divider.
In bootstrap 4 it is much easier to have a border on the fieldset that blends with the legend. You don't need custom css to achieve it, it can be done like this:
<fieldset class="border p-2">
<legend class="w-auto">Your Legend</legend>
</fieldset>
which looks like this:
In Bootstrap 5, modifications to the default style applied to the legend results in a different rendering than what is obtained with Bootstrap 4, you must then add float-none as class of the <legend> tag:
<fieldset class="border p-2">
<legend class="float-none w-auto">Your Legend</legend>
</fieldset>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<fieldset class="border p-2">
<legend class="float-none w-auto p-2">Your Legend</legend>
<input type="text">
</fieldset>
</form>
bootstrap html form fieldset legend
I had this problem and I solved with this way:
fieldset.scheduler-border {
border: solid 1px #DDD !important;
padding: 0 10px 10px 10px;
border-bottom: none;
}
legend.scheduler-border {
width: auto !important;
border: none;
font-size: 14px;
}
I had a different approach , used bootstrap panel to show it little more rich. Just to help someone and improve the answer.
.text-on-pannel {
background: #fff none repeat scroll 0 0;
height: auto;
margin-left: 20px;
padding: 3px 5px;
position: absolute;
margin-top: -47px;
border: 1px solid #337ab7;
border-radius: 8px;
}
.panel {
/* for text on pannel */
margin-top: 27px !important;
}
.panel-body {
padding-top: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="panel panel-primary">
<div class="panel-body">
<h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
<p> Your Code </p>
</div>
</div>
<div>
This will give below look.
Note: We need to change the styles in order to use different header size.
Just wanted to summarize all the correct answers above in short. Because I had to spend lot of time to figure out which answer resolves the issue and what's going on behind the scenes.
There seems to be two problems of fieldset with bootstrap:
The bootstrap sets the width to the legend as 100%. That is why it overlays the top border of the fieldset.
There's a bottom border for the legend.
So, all we need to fix this is set the legend width to auto as follows:
legend.scheduler-border {
width: auto; // fixes the problem 1
border-bottom: none; // fixes the problem 2
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
color: black;
}
<div class="container">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Technical Ameen</legend>
<h2>Your Work Here</h2>
</fieldset>
</div>
if you will not find any proper solution for using legend tag in bootstrap 5
you can use the CSS property for an alternative solution in the legend tag this is an inline CSS example.
style="margin-top:-15px; background-color: white; color: black;"
also, add this line in the fieldset tag for margin-top
style="margin-top: 30px !important;"
I hope this is a very simple solution for getting legend style with bootstrap 5
<fieldset class="border p-2 form-group">
<legend class="control-label customer-legend pl-1">Your Legend</legend>
</fieldset>
use css:
.customer-legend:before {
left: 100px;
}
I am trying to align a search button and search box, I have this working in google chrome but not IE or mobile Safari/Chrome.
The CSS I am using is:
#search input {
background: none repeat scroll 0 0 #fff;
padding: 10px;
border: 0 none;
color: #7F7F7F;
font: 20px 'Open Sans', sans-serif;
transition: background 0.3s ease-in-out 0s;
width: 500px;
height: 40px;
margin: 0 auto;
display: inline-block;
}
#search button {
padding: 21px;
background: url("search.png") no-repeat scroll center center #7eac10;
cursor: pointer;
height: 60px;
text-indent: -99999em;
transition: background 0.3s ease-in-out 0s;
width: 60px;
border: 2px solid #fff;
margin: 0 auto;
display: inline-block;
margin-top: 3%;
}
HTML:
<form id="search" action="/index.php">
>
> <p><b></b> <input type="text" class="search" placeholder="Enter A
> Domain Name or IP address."name="domain" id="domain" value="">
> <button value="lookup"></p></button> </form>
Any help will be appreciated!
The web address is http://rapidwhois.uk
please try:
#search button, #search input {
vertical-align: middle;
}
Well you have other issues on your layout as well, but the basic problem is the fact that you are missing the correct vertical-align in your CSS.
Simply add in vertical-align: text-top to both the INPUT and the BUTTON tags and remove the margin from the button and you are set.
Then you simply need to use a padding on the container element in order to get the same layout as before. (Would give you a better example, but you do not have an isolated test case and I simply confirmed this in my IE.)
Here this should do it for you, wrap the button with a label like this
<label for="btn">
<input type="text" class="search" placeholder="Enter A Domain Name or IP address."name="domain" id="domain" value=""/>
<button id="btn" value="lookup">lookup</button>
</label>
I'm using Bootstrap for my JSP page.
I want to use <fieldset> and <legend> for my form. This is my code.
<fieldset class="scheduler-border">
<legend class="scheduler-border">Start Time</legend>
<div class="control-group">
<label class="control-label input-label" for="startTime">Start :</label>
<div class="controls bootstrap-timepicker">
<input type="text" class="datetime" id="startTime" name="startTime" placeholder="Start Time" />
<i class="icon-time"></i>
</div>
</div>
</fieldset>
CSS is
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
}
I am getting output like this
I want output in the following way
I tried adding
border:none;
width:100px;
to legend.scheduler-border in CSS. And I'm getting the expected output. But the problem is I would like to add another <fieldset> for another fields. That time the width of text in legend is a problem as it is lengthier than than 100px.
So what shall I do to get output like I have mentioned? (Without striking the legend text)
That's because Bootstrap by default sets the width of the legend element to 100%. You can fix this by changing your legend.scheduler-border to also use:
legend.scheduler-border {
width:inherit; /* Or auto */
padding:0 10px; /* To give a bit of padding on the left and right */
border-bottom:none;
}
JSFiddle example.
You'll also need to ensure your custom stylesheet is being added after Bootstrap to prevent Bootstrap overriding your styling - although your styles here should have higher specificity.
You may also want to add margin-bottom:0; to it as well to reduce the gap between the legend and the divider.
In bootstrap 4 it is much easier to have a border on the fieldset that blends with the legend. You don't need custom css to achieve it, it can be done like this:
<fieldset class="border p-2">
<legend class="w-auto">Your Legend</legend>
</fieldset>
which looks like this:
In Bootstrap 5, modifications to the default style applied to the legend results in a different rendering than what is obtained with Bootstrap 4, you must then add float-none as class of the <legend> tag:
<fieldset class="border p-2">
<legend class="float-none w-auto">Your Legend</legend>
</fieldset>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<fieldset class="border p-2">
<legend class="float-none w-auto p-2">Your Legend</legend>
<input type="text">
</fieldset>
</form>
bootstrap html form fieldset legend
I had this problem and I solved with this way:
fieldset.scheduler-border {
border: solid 1px #DDD !important;
padding: 0 10px 10px 10px;
border-bottom: none;
}
legend.scheduler-border {
width: auto !important;
border: none;
font-size: 14px;
}
I had a different approach , used bootstrap panel to show it little more rich. Just to help someone and improve the answer.
.text-on-pannel {
background: #fff none repeat scroll 0 0;
height: auto;
margin-left: 20px;
padding: 3px 5px;
position: absolute;
margin-top: -47px;
border: 1px solid #337ab7;
border-radius: 8px;
}
.panel {
/* for text on pannel */
margin-top: 27px !important;
}
.panel-body {
padding-top: 30px !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="panel panel-primary">
<div class="panel-body">
<h3 class="text-on-pannel text-primary"><strong class="text-uppercase"> Title </strong></h3>
<p> Your Code </p>
</div>
</div>
<div>
This will give below look.
Note: We need to change the styles in order to use different header size.
Just wanted to summarize all the correct answers above in short. Because I had to spend lot of time to figure out which answer resolves the issue and what's going on behind the scenes.
There seems to be two problems of fieldset with bootstrap:
The bootstrap sets the width to the legend as 100%. That is why it overlays the top border of the fieldset.
There's a bottom border for the legend.
So, all we need to fix this is set the legend width to auto as follows:
legend.scheduler-border {
width: auto; // fixes the problem 1
border-bottom: none; // fixes the problem 2
}
fieldset.scheduler-border {
border: 1px groove #ddd !important;
padding: 0 1.4em 1.4em 1.4em !important;
margin: 0 0 1.5em 0 !important;
-webkit-box-shadow: 0px 0px 0px 0px #000;
box-shadow: 0px 0px 0px 0px #000;
margin-top: 30px !important;
}
legend.scheduler-border {
font-size: 1.2em !important;
font-weight: bold !important;
text-align: left !important;
width: auto;
padding: 0 10px;
border-bottom: none;
margin-top: -15px;
background-color: white;
color: black;
}
<div class="container">
<fieldset class="scheduler-border">
<legend class="scheduler-border">Technical Ameen</legend>
<h2>Your Work Here</h2>
</fieldset>
</div>
if you will not find any proper solution for using legend tag in bootstrap 5
you can use the CSS property for an alternative solution in the legend tag this is an inline CSS example.
style="margin-top:-15px; background-color: white; color: black;"
also, add this line in the fieldset tag for margin-top
style="margin-top: 30px !important;"
I hope this is a very simple solution for getting legend style with bootstrap 5
<fieldset class="border p-2 form-group">
<legend class="control-label customer-legend pl-1">Your Legend</legend>
</fieldset>
use css:
.customer-legend:before {
left: 100px;
}
I'm trying to make a simple search form on my website and I'm using the input HTML element. But it is acting really weird.
It gets resized by the browser no matter which size I specify in the style. In the example below I've got an input element with the width of 180px, but the browser renders it as 147px. :/
Do you know what could be the problem?
Here's a video example and the code below: http://screencast.com/t/WwqAQDmofhf
<div id="search" style="background-color:#000; height:100px;">
<input style=" background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
border-radius: 5px 5px 5px 5px;
color: #666666;
float: left;
line-height: normal;
margin: 6px;
padding: 6px 27px 6px 6px;
width: 180px;
z-index: 40;"
type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div>
The meaning of 'width' depends on the page's box model. Traditionally width has included paddings and borders, but the standard model now excludes them.
If you do not have a correct doctype in your html, then most browsers would default to traditional box model, and you would be left with a box of 147px. Adding a doctype would fix it and force other layout to be standard-compliant.
<!DOCTYPE html>
<html><head><body>
<div id="search" style="background-color:#000; height:100px;">
<input style=" background: none repeat scroll 0 0 #FFFFFF;
border: medium none;
border-radius: 5px 5px 5px 5px;
color: #666666;
float: left;
line-height: normal;
margin: 6px;
padding: 6px 27px 6px 6px;
width: 180px;
z-index: 40;"
type="text" name="searchQuery" value="Search friend" onfocus="this.value=''" />
</div></body></html>
It's probably to do with:
padding: 6px 27px 6px 6px;
27px of right padding + 6px of left padding + 147px of reported width = 180px
Have you tried it with Javascript turned off in your browser?
Does it happen in this example?