It seems simple, but I can't seem to figure it out. I have a checkbox with text, and I need the text to stand on the left, checkbox on the right. How can I do this?
Here's my code:
.custom-control-description {
color: #009fff;
text-transform: uppercase;
}
.custom-checkbox .custom-control-indicator {
border-radius: 0;
border: 2px solid #cdc9ca;
background: #fff;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<form>
<div class="checkbox-wrap d-flex justify-content-end p-2 mb-2">
<label class="custom-control custom-checkbox">
<span class="custom-control-description">All Pages</span>
<input type="checkbox" class="custom-control-input">
<span class="custom-control-indicator"></span>
</label>
</div>
</form>
Add position attribute to the styling of custom-control-indicator.
.custom-checkbox .custom-control-indicator {
position: relative;
border-radius: 0;
border: 2px solid #cdc9ca;
background: #fff;
}
try the below code , just place the text inside the label
<label >
<span>Text goes here....</span>
</label>
<input type="checkbox" class="custom-control-input">
Related
I have a very high form with lot of input fields, so I had to reduce the height of every input.
As also bootstrap form-control-sm was not tight enough for me, I created a new class form-control-xs:
.form-control-xs {
height: 20px!important;
padding: .025rem .25rem !important;
font-size: .75rem !important;
line-height: 0;
border-radius: .2rem;
}
Everything is working well, except the "date" input fields, as you see in the image the text is not visible.
It seems like there is an inner margin or padding, but i don't understand how to change it.
Do you know if is it possible to do it?
I add a snippet:
.form-control-xs {
height: 20px!important;
padding: .025rem .25rem !important;
font-size: .75rem !important;
line-height: 0;
border-radius: .2rem;
}
<fieldset>
<div class="form-group row mb-0">
<label for="from" class="col-sm-4 col-form-label col-form-label-sm">LABEL</label>
<div class="col-sm-7 ">
<input type="date" class="form-control form-control-xs" stl NAME="from" autocomplete="off" value="">
</div>
</div>
</fieldset>
.form-control-xs {
height: 20px!important;
font-size: .75rem !important;
border-radius: .2rem;
}
<fieldset>
<div class="form-group row mb-0">
<label for="from" class="col-sm-4 col-form-label col-form-label-sm">LABEL</label>
<div class="col-sm-7 ">
<input type="date" class="form-control form-control-xs" stl NAME="from" autocomplete="off" value="">
</div>
</div>
</fieldset>
I have a form from Mailchimp, that needs a bit of style modification. I am trying to create an effect when I focus on the input field, and the label will be placed on top of It; However, as soon as I unfocus from the input field, the label goes back from the previous position which overlaps the text input. I want the label to stay on top of the input field if it's not empty. I intentionally put !important to override Mailchimp styling.
I've been trying to solve this problem the whole day; I would appreciate it if someone can help me out.
Thanks!
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
#mc_embed_signup form{padding:0}
.input-field{
border: 0 !important;
padding: 0 !important;
z-index: 1 !important;
background-color: transparent !important;
border-bottom: 2px solid #eee !important;
font: inherit !important;
font-size: 14px !important;
line-height: 30px!important;
}
.floating-label {
color: #8597a3 !important;
position: absolute !important;
top: 10px !important;
-moz-transition: all 0.3s !important;
-o-transition: all 0.3s !important;
-webkit-transition: all 0.3s !important;
transition: all 0.3s !important;
}
.input-field:focus, .input-field:valid {
outline: 0 !important;
border-bottom-color: #665856 !important;
}
.input-field:focus + .floating-label, .floating-label:valid + .input-field {
color: #665856 !important;
-moz-transform: translateY(-25px) !important;
-ms-transform: translateY(-25px) !important;
-webkit-transform: translateY(-25px) !important;
transform: translateY(-25px) !important;
}
.mc-field-group{
border:none !important;
outline:none !important;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. /
</style>
<div id="mc_embed_signup">
<form action="https://m2comms.us5.list-manage.com/subscribe/post?u=3e58fab1fe0416a1387ddca81&id=42a1e07998" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="input-field" id="mce-EMAIL" required />
<label for="mce-EMAIL" class="floating-label">Email Address</label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="FNAME" class="input-field" id="mce-FNAME" required />
<label for="mce-FNAME" class="floating-label">First Name </label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="LNAME" class="input-field" id="mce-LNAME" required />
<label for="mce-LNAME" class="floating-label">Last Name </label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="COMPANY_NAME" class="input-field" id="mce-CNAME" required />
<label for="mce-CNAME" class="floating-label">Company name </label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3e58fab1fe0416a1387ddca81_42a1e07998" tabindex="-1" value=""></div>
<div class="mc-field-group"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" style="color: black; margin-left: 0; background:#532e77!important; color:#ffffff; font-family: Montserrat; font-size: 16px; font-weight: 700; letter-spacing: 2px;"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='COMPANY_NAME';ftypes[5]='company_name';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
There is a special css selector that you can rely on for this problem. No 'required' needed for input boxes, no complex jQuery conditions needed.
Just add empty placeholder and select the labels with input:not(:placeholder-shown) ~ label . Code in detail below.
<link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
#mc_embed_signup form{padding:0}
.input-field{
border: 0 !important;
padding: 0 !important;
z-index: 1 !important;
background-color: transparent !important;
border-bottom: 2px solid #eee !important;
font: inherit !important;
font-size: 14px !important;
line-height: 30px!important;
}
.floating-label {
color: #8597a3 !important;
position: absolute !important;
top: 10px !important;
-moz-transition: all 0.3s !important;
-o-transition: all 0.3s !important;
-webkit-transition: all 0.3s !important;
transition: all 0.3s !important;
}
.input-field:focus, .input-field:valid {
outline: 0 !important;
border-bottom-color: #665856 !important;
}
.input-field:focus + .floating-label, .floating-label:valid + .input-field, input:not(:placeholder-shown) ~ label {
color: #665856 !important;
-moz-transform: translateY(-25px) !important;
-ms-transform: translateY(-25px) !important;
-webkit-transform: translateY(-25px) !important;
transform: translateY(-25px) !important;
}
.mc-field-group{
border:none !important;
outline:none !important;
}
/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. /
</style>
<div id="mc_embed_signup">
<form action="https://m2comms.us5.list-manage.com/subscribe/post?u=3e58fab1fe0416a1387ddca81&id=42a1e07998" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div class="mc-field-group">
<input type="email" value="" name="EMAIL" class="input-field" id="mce-EMAIL" placeholder=" ">
<label for="mce-EMAIL" class="floating-label">Email Address</label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="FNAME" class="input-field" id="mce-FNAME" placeholder=" ">
<label for="mce-FNAME" class="floating-label">First Name </label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="LNAME" class="input-field" id="mce-LNAME" placeholder=" ">
<label for="mce-LNAME" class="floating-label">Last Name </label>
</div>
<div class="mc-field-group">
<input type="text" value="" name="COMPANY_NAME" class="input-field" id="mce-CNAME" placeholder=" ">
<label for="mce-CNAME" class="floating-label">Company name </label>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3e58fab1fe0416a1387ddca81_42a1e07998" tabindex="-1" value=""></div>
<div class="mc-field-group"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" style="color: black; margin-left: 0; background:#532e77!important; color:#ffffff; font-family: Montserrat; font-size: 16px; font-weight: 700; letter-spacing: 2px;"></div>
</div>
</form>
</div>
<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';fnames[3]='ADDRESS';ftypes[3]='address';fnames[4]='PHONE';ftypes[4]='phone';fnames[5]='COMPANY_NAME';ftypes[5]='company_name';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
I know there are a lot answers here. I searched, tried to adapt but I failed all the time, that is why I am asking now.
I have the following problem. I want, both, labels and there inputs to be in the same line: Yes o No o (o symbolize the input).
Here my following code, remark that I changed the display property of label to inline block:
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
Sorry for answering, although there are a lot of similar questions and answers but adapting them did just not work...
If you want the inputs and the label to be 'bottom-aligned', try using vertical-align: text-bottom.
input[type='radio'] {
vertical-align: text-bottom;
margin-bottom: 1px;
}
div {
display: inline-block;
border: 1px solid black;
}
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
Apply vertical-align: middle with margin-top: -1px to each input[type='radio'] :
input[type='radio'] {
margin-top: -1px;
vertical-align: middle;
}
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
Perfect center : just line added crossing text and button in this second snippet to show perfect center
input[type='radio'] {
margin-top: -1px;
vertical-align: middle;
}
.col-sm-3 {
position: relative;
border: 1px solid;
}
.col-sm-3:after {
display: block;
content: '';
position: absolute;
width: 100%;
height: 1px;
background: black;
top: 50%;
}
<div class="col-sm-3">
<label>Yes</label>
<input type="radio" name="yes/no" checked>
<label>No</label>
<input type="radio" name="yes/no" >
</div>
You might want to consider wrapping your <input> in the <label> fields.
Example:
<div class="col-sm-3">
<label>Yes
<input type="radio" name="yes/no" checked>
</label>
<label>No
<input type="radio" name="yes/no" >
</label>
</div>
This implementation will increase accessibility and usability of your inputs and doesn't require any additional css.
I'm having some difficulties with my Mailchimp form that I want to customize a little bit.
Here is the code:
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background: rgba(76, 175, 80, 0.0);
color: #000000;
padding: 0px;
text-align: center;
}
/* Styles the input boxes */
#mc_embed_signup input {
width: 200px;
height:100px
}
/* Styles the subscribe button */
#mc_embed_signup .button {
background: rgb(255, 255, 255, 0.1);
color: #ffffff;
margin: 100 auto;
height: 55px;
}
</style>
<div id="mc_embed_signup">
<form action="//meetwo.us14.list-manage.com/subscribe/post?u=12989e1d2702ab809b7df0ed4&id=26362168c9" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your Email" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_12989e1d2702ab809b7df0ed4_26362168c9" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="GET BETA INVITE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
So basically, I have something like this:
Form screenshot
As you can see, the email field hasn't the same height of the GET BETA INVITE button and I don't understand when I can change it.
So I'm looking for valuable help.
Thank you!
Your referenced CSS includes changes to #mc_embed_signup input.email which overwrites your #mc_embed_signup input.
Try changing this to: #mc_embed_signup input.email and you should be able to change the height of the input aswell.
<!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
#mc_embed_signup {
background: rgba(76, 175, 80, 0.0);
color: #000000;
padding: 0px;
text-align: center;
}
/* Styles the input boxes */
#mc_embed_signup input.email {
width: 200px;
height: 55px
}
/* Styles the subscribe button */
#mc_embed_signup .button {
background: rgb(255, 255, 255, 0.1);
color: #ffffff;
margin: 100 auto;
height: 55px;
}
</style>
<div id="mc_embed_signup">
<form action="//meetwo.us14.list-manage.com/subscribe/post?u=12989e1d2702ab809b7df0ed4&id=26362168c9" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Your Email" required>
<!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_12989e1d2702ab809b7df0ed4_26362168c9" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="GET BETA INVITE" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I Want some samples for step by step registrations like a wizard.
i want to use these samples and asp.net page.
Thanks.
You can easily create your own using jQuery - check out this demo
http://jsfiddle.net/nwJFs/
And here's the code
HTML
<div class="step step-1">
<div class="wrap">
<label for="name">Name</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Email</label>
<input id="email" type="text" />
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
<div class="step step-2">
<div class="wrap">
<label for="name">Mobile</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Address</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Phone</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Next</a>
</div>
<div class="step step-3">
<div class="wrap">
<label for="name">Some</label>
<input id="name" type="text" />
</div>
<div class="wrap">
<label for="email">Other</label>
<textarea id="email"></textarea>
</div>
<div class="wrap">
<label for="phone">Fields</label>
<input id="phone" type="text" />
</div>
<br class="clear-last" />
<a class="button prev" href="#">Previous</a>
<a class="button next" href="#">Submit</a>
</div>
CSS
body {
font-family: Trebuchet MS;
font-size: 12px;
}
.wrap {
clear: both;
padding: 8px 0;
}
.wrap label {
display: block;
float: left;
width: 150px;
padding: 4px;
line-height: 12px;
}
.wrap input,
.wrap textarea {
display: block;
font-size: 12px;
line-height: 12px;
float: left;
width: 200px;
border: 1px solid #888;
padding: 4px 8px;
}
.button {
background: #333;
color: #f2f2f2;
display: inline-block;
padding: 4px 8px;
text-decoration: none;
border: 1px solid #ccc;
}
.button:hover {
background: #888;
color: #000;
}
br.clear-last {
clear: both;
margin: 15px 0;
}
.step {
display: none;
}
.step-1 {
display: block;
}
jQuery
$(".next").click(function() {
//store parent
var parent = $(this).parent();
if(parent.next().length) {
parent.hide("slow").next().show("slow");
}
return false;
});
$(".prev").click(function() {
var parent = $(this).parent();
if(parent.prev().length) {
parent.hide("slow").prev().show("slow");
}
return false;
});
check out this one : http://thecodemine.org
having problems with chrome though...
Do you mean, something like this?
jQuery Form Builder
checkout these links for better wizard creation:
techlab-smart wizard: http://techlaboratory.net/smartwizard
https://github.com/techlab/SmartWizard