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.
Related
I have radio buttons which is something like this-
<div class="btn-group btn-group-toggle custom-btns" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" [value]="1"> Left (pre-checked)
</label>
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" [value]="middle"> Middle
</label>
<label ngbButtonLabel class="btn-primary">
<input ngbButton type="radio" [value]="false"> Right
</label>
</div>
Now if I'm trying to use the active or focus property on the btn-primary class, it's not working. The only thing I see is the default chrome outline when a button is selected. Here is the CSS I'm using-
.custom-btns{
.btn-primary:hover{
background-color: green;
color: black;
}
.btn-primary:focus, btn-primary:active{
color: #fff ;
background: blue;
border: none;
outline: none;
}
}
I want the label to turn green when I hover over it and blue when it is focused.
Can someone please let me know what I'm doing wrong here?
Thanks!
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.
How can I change the background color of the active/selected button in the button group?
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" checked>
<label id="monthly" class="btn btn-outline-primary" for="btnradio1">Button 1</label>
<input type="radio" class="btn-check" name="btnradio" id="btnradio2">
<label class="btn btn-outline-primary" for="btnradio2">Button 2</label>
</div>
By using this css, the unselected btn color gets changed. But how can I change the background color of the selected btn?
.btn-group .btn {
color: #ff60bd;
border-color: #ff60bd;
}
Many thanks!
Add this code in your css file and try.
First is to hide the radio controls, but second is I think what you need if you want to change the background color when button is :checked
input[type="radio"]{
display: none;
}
input[type="radio"]:checked + .btn {
color: #fff;
background: #ff60bd!important;
}
input[type="radio"]:hover + .btn {
color: #fff;
background-color: red;
}
The selected or active button has active class, you need to check ".active" class of ".btn" as following sample:
.btn-group .btn.active {
color: #ff60bd;
border-color: #ff60bd;
}
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 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.