I was wondering if I could display divs according to the radio button selected without using Jquery, just pure css. Problem is I'm not sure if I can overcome the scope defined for it. Here's a mock up of what I've written for it.
<div class="tester">
<input type="radio" name="chk" class="chkbox chkbox1" id="chk1" checked/>
<label for="chk1">Paypal</label>
<input type="radio" name="chk" class="chkbox chkbox2" id="chk2" />
<label for="chk2">Braintree</label>
<input type="radio" name="chk" class="chkbox chkbox3" id="chk3" />
<label for="chk3">Du</label>
</div>
<div class="test">
<div id="chkbox1" class="box">Paypal</div>
<div id="chkbox2" class="box">Braintree</div>
<div id="chkbox3" class="box">Du</div>
</div>
</div>
<div class="test">
<div id="chkbox1" class="box"> Paypal </div>
<div id="chkbox2" class="box"> Braintree </div>
<div id="chkbox3" class="box"> Du </div>
</div>
</div>
CSS
.box{
border: 2px solid #ccc;
padding:20px;
margin:20px 0 0;
max-height:150px;
max-width:300px;
display:none /* By Default the box is hidden */
}
.chkbox1:checked ~ .test > #chkbox1,
.chkbox2:checked ~ .test > #chkbox2,
.chkbox3:checked ~ .test > #chkbox3 {
display: block
}
Any ideas?
JSfiddle for it here.
Related
There is a multiple input feature provided in Bootstrap 4 that looks like the following:
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text" id="">First and last name</span>
</div>
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
Is there a trivial way to replicate this behavior using Bootstrap 3.3.7? Would it require stripping styles from Bootstrap 4 or is there something I'm overlooking in 3.3.7 that already allows this behavior? The documentation is available here: https://getbootstrap.com/docs/4.0/components/input-group/#multiple-inputs
I cannot speak to it being trivial or not, but with some additional CSS and with the assistance of the Bootstrap Grid you can achieve similar results:
.input-group-multi [class*='col-'] {
margin: 0 !important;
padding: 0 !important;
}
.input-group-multi .form-control {
border-right: 0;
}
.input-group-multi [class*='col-']:last-child .form-control {
border-radius: 0 4px 4px 0;
border-right: 1px solid #ccc;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-6"><input type="text" class="form-control"></div>
<div class="col-xs-6 no-gutters"><input type="text" class="form-control"></div>
</div>
<br />
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
<div class="col-xs-4"><input type="text" class="form-control"></div>
</div>
<br />
<div class="input-group input-group-multi">
<div class="input-group-addon">First and last name</div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
<div class="col-xs-3"><input type="text" class="form-control"></div>
</div>
In the above code snippet you can see how .input-group-mutli is sort of the heavy-lifter here. With this new class we can use a wildcard match on the Bootstrap Grid column to remove all margin and padding. That alone gets you to where your multiple inputs will line up nicely... but with the borders doubling up.
A little extra CSS to detect remove the right-border and then re-apply that border on the last column+input provides you with a pretty spot on multiple input feature. With one exception of course; this presumes that input-group-addon is always on the left.
A little CSS will give you the same effect.
In the following snippet I created the css class input-multiple and modified the CSS styling accordingly. Adjust field widths as needed, here I simply altered the width:100% associated with Bootstraps .form-control class
.input-multiple>input.form-control {
width: auto;
}
.input-multiple>input.form-control+input.form-control {
border-left: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div style="padding:20px">
<div class="row">
<div class="col-lg-6">
<div class="input-group input-multiple">
<span class="input-group-addon" id="sizing-addon1">First and Last Name</span>
<input type="text" class="form-control" placeholder="First Name">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
</div>
</div>
I want to align some check boxes with labels such that the check boxes are in a vertical row to the right side and the labels are aligned with the starting edges in a vertical row on the left side.
.row {
display: flex;
}
.row label { flex: 1; max-width: 25%; }
<div class="container">
<div class="row">
<label>Label</label><input type="checkbox" />
</div>
<div class="row">
<label>Label 2</label><input type="checkbox" />
</div>
<div class="row">
<label>Label 3</label><input type="checkbox" />
</div>
</div>
I believe this is what you're looking for:
label {
display: inline-block;
padding-left: 15px;
}
<form>
<div>
<label>Label text</label><input type="checkbox" />
<label>Label text</label><input type="checkbox" />
<label>Label text</label><input type="checkbox" />
</div>
<form>
Working Example: JSFiddle
Css File:
.badgebox
{
opacity: 0;
}
.badgebox + .badge
{
/* Move the check mark away when unchecked */
text-indent: -999999px;
/* Makes the badge's width stay the same checked and unchecked */
width: 27px;
}
.badgebox:focus + .badge
{
/* Set something to make the badge looks focused */
/* This really depends on the application, in my case it was: */
/* Adding a light border */
box-shadow: inset 0px 0px 5px;
/* Taking the difference out of the padding */
}
.badgebox:checked + .badge
{
/* Move the check mark back when checked */
text-indent: 0;
}
HTML File:
<div class="container">
<div class="row text-center">
<br>
<br>
<h1>Badgebox: CSS only checkbox badge!</h1>
<h2>Works on Bootstrap 2.3.2 and up</h2>
<br>
<label for="default" class="btn btn-default">Default <input type="checkbox" id="default" class="badgebox"><span class="badge">✓</span></label>
<label for="primary" class="btn btn-primary">Primary <input type="checkbox" id="primary" class="badgebox"><span class="badge">✓</span></label>
<label for="info" class="btn btn-info">Info <input type="checkbox" id="info" class="badgebox"><span class="badge">✓</span></label>
<label for="success" class="btn btn-success">Success <input type="checkbox" id="success" class="badgebox"><span class="badge">✓</span></label>
<label for="warning" class="btn btn-warning">Warning <input type="checkbox" id="warning" class="badgebox"><span class="badge">✓</span></label>
<label for="danger" class="btn btn-danger">Danger <input type="checkbox" id="danger" class="badgebox"><span class="badge">✓</span></label>
</div>
</div>
Or
Refer this Link:
https://bootsnipp.com/snippets/featured/badgebox-css-checkbox-badge
How can I use inline css to change the button and hover colors in the embedded Mailchimp form on my site Homeschool With Love? I would like the background color to be #0A99AA and the hover color to be #d40000. It is a Wordpress.org site. Can you please show what code I should insert and where I should insert it? Thanks. Here's the code I have right now:
<div style="border-style: solid; border-width: 2px; border-color: #0A99AA;">
<!-- Begin MailChimp Signup Form -->
<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; }
/* 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="//homeschoolwithlove.us13.list-manage.com/subscribe/post?u=74d56fdb848e8be499cc4df0e&id=a119f30caa" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
<div style="text-align: center; color: #d40000; font-size: 120%; padding-right: 10px; padding-left: 10 px;">
<h3>Sign up for the Homeschool With Love Newsletter and get the Angel Learning Resource Pack FREE</h3>
</div>
<div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
<div class="mc-field-group">
<label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
</div>
<div class="mc-field-group">
<label for="mce-FNAME">First Name <span class="asterisk">*</span>
</label>
<input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
</div>
<div class="mc-field-group">
<label for="mce-LNAME">Last Name </label>
<input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</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_74d56fdb848e8be499cc4df0e_a119f30caa" tabindex="-1" value=""></div>
<div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
</div>
</form>
</div>
<!--End mc_embed_signup-->
</div>
add these two lines immediately after the #mc_embed_signup line:
#mc-embedded-subscribe { background-color: #0a99a !important; }
#mc-embedded-subscribe:hover { background-color: #d40000 !important; }
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.
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