Im trying to get custom colors on my checkbox buttons in bootstrap 4 and MBD 5. I've managed to change the color on some of the parts, but cannot manage to change the color when its toggled and when i toggled it once and tries to turn it off it doesn't change back to my primary color on the button until i click somewhere else on the page. My code for the buttons is below.
<div class="form-group">
<h2>Heading</h2>
<div class="btn-group-toggle" data-toggle="buttons">
<input type="checkbox" class="btn-check" id="risk1" autocomplete="off" onclick="myFunction(this.id)">
<label class="btn btn-primary col" for="risk1">Checkbox 1</label>
</div>
<div class="btn-group-toggle" data-toggle="buttons">
<input type="checkbox" class="btn-check" id="risk2" autocomplete="off" onclick="myFunction(this.id)">
<label class="btn btn-primary col" for="risk2">Checkbox 2</label>
</div>
</div>
The code i use in my CSS to change the color of the buttons is below.
.btn-primary{color:#fff;background-color:#007b4e;border-color:#007b4e}
.btn-primary:hover{color:#fff;background-color:#08402b;border-color:#08402b}
.btn-primary:focus,.btn-primary.focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
.btn-primary.disabled,
.btn-primary:disabled{color:#fff;background-color:#08402b;border-color:#08402b}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle{color:#fff;background-color:#08402b}
.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}
The onclick function is because every checkbox is going to show a text if its checked or not.
Here's a link where you can see my problem https://www.codeply.com/p/41wATHNgm8. I want the dark green that you see when you hover to stay when its toggled not blue as it is now and back to the light green when you untoggle it.
Fixed it!
Added input[type=checkbox]:checked + label{ background-color: #08402b; } into the css file and changed from btn-primary to btn-custom.
Related
I am trying to change the colors of radio buttons given here https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups
normally the background is white, and when they are clicked they turn to blue.
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
<label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
<label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>
</div>
I would like to change the default background color to green when not clicked, and to red when it is checked/selected.
Here what I tried in css, it changes to green, but the selected button does not turn to red.
.btn-outline-primary {
background-color: green !important;
}
.btn-outline-primary:active,
.btn-outline-primary:checked,
.btn-outline-primary:hover,
.btn-outline-primary:enabled {
background-color: red !important;
}
This is the class you have to overwrite. Notice that bootstrap selection is more specific than yours, so it comes ahead.
.btn-check:active+.btn-outline-primary,
.btn-check:checked+.btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show,
.btn-outline-primary:active {
color: #fff;
background-color: red;
border-color: red;
}
Also, if your CSS file goes under the bootstrap's in your <head> tag, it will works. Otherwise need to add !important.
I've been passed a recently-appeared bug which involves a label element nolonger being set to :active.
My (probably) simple question is: How would I toggle the label's :active state when the label is clicked? I can check dev tools and test what the css will do if the label were :active (see screenshot below) but how would I get the label to actually be :active? The :hover state works, so I'm hoping :active can too.
This had previously been working, apparently and, as you can see from the screenshot, the css for an :active state had already been written.
Just to be clear: I don't want to add an 'active' class to the element; I want to exploit the in-build :active state, similar to :hover.
Thanks.
there is no active or selected state for label element.
What you see is a bootsrap trick imo
You are free to give any class to get it worked, e.g.
$('.u').on('click', function(){
$('.u').removeClass('e');
$(this).addClass('e');
});
.u:focus {
background-color: red;
}
.u {
background-color: lightgrey;
}
.e {
background-color: red;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
"http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"</script>
<div class="col-xs-12 col-md-10">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-md u e" >
<input type="radio" name="weight" value="1">Small (0-3 lbs)
</label>
<label class="btn btn-md u">
<input type="radio" name="weight" value="2"> Medium (3-7 lbs)
</label>
<label class="btn btn-md u">
<input type="radio" name="weight" value="3"> Large (7+ lbs)
</label>
</div>
</div>
</div>
I'm a CSS/HTML novice and I haven't really found how to do this by searching. I have a simple login page where a person enters in a username and password. The page has a large background image. I want to create a rounded box that the two text fields (username and password) and the submit button goes into and sits on top of to further separate form the background image. Here is the main part of the html file, I just want to know what should I put into the container section of the CSS file to get a rounded white box .
<div class="container">
<form class="form-signin" role="form" name='f'
action='${pageContext.request.contextPath}/j_spring_security_check' method='POST'>
<h2 class="form-signin-heading">Please sign in</h2>
<input type='text' name='j_username' class="form-control" placeholder="Username"
required autofocus>
<input type='password' name='j_password' class="form-control"
placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
As far as a box goes, you can just create a div for that(as I see you've done: .container). To round the corners, you'll want to use the CSS property border-radius:
HTML:
<div id="example1">Hello!</div>
CSS:
#example1 {
width: 100px;
background: green;
border-radius: 15px;
margin: 0 auto;
text-align: center;
}
JSFiddle Example
It appears you have a bootstrap example. First, you need to use bootstrap (http://getbootstrap.com) then add a class that suits you best to container. I recommend the classes "well", "thumbnail", and "jumbotron". Visit the CSS section on the bootstrap site to see these rendered. If you don't want to use bootstrap, just copy the CSS code and apply it to your example.
Using Bootstrap I want a button group but with one button preselected. If I use the html below then the first button gets preselected, but it remains active even when I click on one of the other buttons.
Using only html how can I define the button group with one button selected where that button will deselect when I click on one of the other buttons.
<div class="btn-group">
<button type="button" class="btn btn-default active">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
It's not completely possible to do this with HTML only - (as your title implies).
Really, the only thing you could do without JavaScript is add the attribute autofocus="autofocus" to the desired element like this:
<button type="button" class="btn btn-default" autofocus="autofocus">Left</button>
As the attribute implies, the button will automatically be focused in supported browsers. If another button is clicked, the focus of the first button will be removed.
EXAMPLE HERE
It's worth noting that the styling of .btn-default.active is the same as .btn-default:focus:
.btn-default:focus, .btn-default.active {
color: #333;
background-color: #ebebeb;
border-color: #adadad;
}
Unfortunately, the focus will also be removed when clicking anywhere else on the page too. If this is a problem, JavaScript would be needed to solve this. The solution would be to have the active class on the desired element and then remove it when clicking on any of the sibling button elements. The selection would be mutually exclusive like with radio elements.
Here is an example taken directly from the Bootstrap JS documentation. It's worth noting that the Bootstrap JS file/jQuery need to be included.
EXAMPLE HERE
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" name="options" id="option1"> Option 1
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option2"> Option 2
</label>
<label class="btn btn-primary">
<input type="radio" name="options" id="option3"> Option 3
</label>
</div>
I am trying to use Bootstrap for my website. I have radio buttons and I am trying to use "Buttons" from bootstrap for the same.
<td style="margin-bottom:0px; padding-bottom: 0px;font-size=12px;vertical-align:bottom;">
<div class="btn-group" data-toggle="buttons" id="topButtonDiv" >
<button type="button" class="btn btn-primary">Home
<input type="radio" id="radio1" ></button>
<button type="button" class="btn btn-primary">Home1
<input type="radio" id="radio2" > </button>
<button type="button" class="btn btn-primary">Home2
<input type="radio" id="radio7"> </button>
</div>
</td>
The problem I am facing is that I still see the circles in the Radio button present, where as in the Bootstrap example, I see no such circles present.
http://getbootstrap.com/javascript/#buttons-usage
Can you let me know what I am missing here?
Another alternative if the css version update is not working is to manually hide the radio button using css
[type='radio'] {
display: none;
}
Check for the version of css you've added. The same btn-group class works fine here
Your markup for bootstrap radio buttons is wrong, you make it like this:
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
Furthermore you can't put a input element within a button element. That's invalid html.