I have a series of buttons on a page and I want to target their hover functionality each individually, but if I try adding :hover to this it does not work.
Is there a way to get this to work?
input.chk-btn+label[for=recent-check] {
cursor: pointer;
background: red !important;
}
input.chk-btn+label[for=recent-check]:hover {
cursor: pointer;
background: red !important;
}
<input class="chk-btn" id="recent-check" type="checkbox">
<label class="btn btn-success text-uppercase m-b-xs sort-button" for="recent-check">Recent
<span class="glyphicon"></span>
</label>
input.chk-btn + label[for=recent-check]:hover {
cursor: pointer;
background: red !important;
}
<input class="chk-btn" id="recent-check" type="checkbox">
<label class="btn btn-success text-uppercase m-b-xs sort-button" for="recent-check">Recent
<span class="glyphicon"></span>
</label>
The above code works for me!
If your question is to ensure that the background changes colour on hover of the checkbox instead of the label you need to move the hover selector to after the checkbox selector not the label selector.
input.chk-btn:hover + label[for=recent-check] {
cursor: pointer;
background: red !important;
}
<input class="chk-btn" id="recent-check" type="checkbox">
<label class="btn btn-success text-uppercase m-b-xs sort-button" for="recent-check">Recent
<span class="glyphicon"></span>
</label>
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!
I am trying to create a checkbox which looks like a button, I am able to get it done but the only problem I am having is I am not able to change the background color of the button when it's checked. Currently when I check the checkbox the button becomes light- grey I want it to be blue, here is the snippet of my HTML and CSS. Any help is appreciated, Thanks in advance
.checkboxes{
cursor: pointer;
z-index: 90;
text-align: center;
font-family: "Arial";
font-weight: bold;
font-size: 16px;
color: #235988;
width: 270px;
margin: 5px;
border-radius: 0px !important;
border: 1px solid #235988 !important;
padding-bottom: 5px;
}
.checkboxes:hover{
background: #235988 !important;
color: #FFF !important;
}
.form-check label input[type="checkbox"]:checked{
background: #235988;
color: #FFF;
}
.form-check label input[type="checkbox"] {
opacity:0;
}
<div class="col-md-12 form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons">
<label for="checkbox_select" class="col-md-3"> Please select one or many checkboxes </label>
<div class="col-md-7">
<label class="btn btn-default checkboxes">
<input type="checkbox" name="checkbox_select" value = "1" class = "form-check list-group-item" id = "checkbox_select0" > Checkbox1
</label>
<label class="btn btn-default checkboxes">
<input type="checkbox" name="checkbox_select" value = "2" class = "form-check list-group-item" id = "checkbox_select1" > Checkbox2
</label>
<label class="btn btn-default checkboxes">
<input type="checkbox" name="checkbox_select" value = "3" class = "form-check list-group-item" id = "checkbox_select2" > Checkbox3
</label>
</div>
You need to put your input outside the label as a sibling (since we will use the Adjacent sibling combinator ) and use the "for" attributer
.checkboxes{
cursor: pointer;
z-index: 90;
text-align: center;
font-family: "Arial";
font-weight: bold;
font-size: 16px;
color: #235988;
width: 270px;
margin: 5px;
border-radius: 0px !important;
border: 1px solid #235988 !important;
padding-bottom: 5px;
}
.checkboxes:hover,
.form-check input[type="checkbox"]:checked + label{
background: #235988;
color: #FFF;
}
.form-check input[type="checkbox"] {
opacity: 0;
}
<div class="col-md-12 form-check list-inline list-group-horizontal btn-group" role="group" data-toggle="buttons">
<label for="checkbox_select" class="col-md-3"> Please select one or many checkboxes </label>
<div class="col-md-7">
<input id="checkbox-1" type="checkbox" name="checkbox_select" value = "1" class = "form-check list-group-item" id = "checkbox_select0" >
<label class="btn btn-default checkboxes" for="checkbox-1">
Checkbox1
</label>
<input id="checkbox-2" type="checkbox" name="checkbox_select" value = "2" class = "form-check list-group-item" id = "checkbox_select1" >
<label class="btn btn-default checkboxes" for="checkbox-2">
Checkbox2
</label>
<input id="checkbox-3" type="checkbox" name="checkbox_select" value = "3" class = "form-check list-group-item" id = "checkbox_select2" >
<label class="btn btn-default checkboxes" for="checkbox-3">
Checkbox3
</label>
</div>
I think there are many solutions.
I introduce you just one of them.
Hide the iuput by setting css display property none.
Make a toggle button looks you like as span or div element.
Attach js function on div element onclick attrbute. Function toggles option of hidden iuput element.
But Ithink more ez way is to use some flamework, like Vue,Angular,and so on.
I am creating two button groups. whenever I click a button from second button group, already selected button from 1st group is getting deselected. i am able to select only one button both group. i want to select one button from each group. This is the code & I use :focus (css) for button.
EDIT
I need to use button type for bootsrap (btn-primary)
.show {
display: block;
}
.btn-group {
margin-top: 20px;
overflow: hidden;
}
.btn {
font-weight: bold;
color: white;
border: none;
outline: none;
padding: 12px 16px;
/*blue*/
background-color: #2c75ff;
cursor: pointer;
}
.btn:hover {
font-weight: bold;
color: white;
/*green*/
background-color: #85c995;
}
.btn:focus {
/*green*/
background-color: #85c995;
color: white;
}
<div class="row">
<div class="column" style="width:30%">
<div class="btn-group" id="group1" role="group">
<button type="button" class="btn btn-primary" style="outline-color:red; " #onclick="() => UpdateTheChart(11)">#Language.T35</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(12)">#Language.T36</button>
<button type="button" class="btn btn-primary" btn btn-primary " #onclick="()=> UpdateTheChart(13)">#Language.T37</button>
</div>
</div>
<div class="column" style="width:70%">
<div class="btn-group" id="group2" role="group">
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(21)">#Language.T138</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(22)">#Language.T38</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(23)">#Language.T39</button>
<button type="button" class="btn btn-primary" #onclick="() => UpdateTheChart(24)">#Language.T40</button>
</div>
</div>
</div>
It is not possible to apply :focus to multiple elements at the same time.
You'll need to manually add/remove a CSS class to the selected item in each group or change your code to use the more appropriate radio button group in this scenario.
For example (pseudo-code, may not work as-is):
// Get all the buttons and add a click handler to them
let buttons = document.querySelectorAll(".btn-group .btn");
buttons.forEach(button => {
button.addEventListener("click", () => {
// do the UpdateChart stuff using some id property instead of inline onclick attribute
UpdateTheChart(this.dataset.id);
// find the button that has focus in the this button's group and remove the class
this.parentElement.querySelector(".btn-focus").removeClass("btn-focus");
// add the focus class to this button
this.addClass("btn-focus");
});
});
Note: for this to work you'll have to change your CSS to use the className instead of the :focus pseudo-class.
The short answer
Unluckily, "button groups" for multiple/single selection doesn't exist, that's the job of radios and checkboxes.
The long one
As you want to select one option per group, you should be using radios, as you can make groups (grouping by the name prop) and keep selected (checked) one option for each group.
Applying the solution:
You need to move your #onclick event to the label (as it's your new "button"), and hide the radio, so you keep the same UI.
Notice I place each label after their respective radio so we can select them with input[type="radio"]:checked + label, meaning: for the label immediately after a checked radio, apply that style.
E.g.:
.row {
display: flex;
gap: 1rem;
}
.column {
display: flex;
flex-direction: column;
}
label {
/*blue*/
background-color: #2c75ff;
color: white;
cursor: pointer;
font-weight: bold;
padding: 12px 16px;
width: fit-content;
}
label:hover,
input[type="radio"]:checked+label {
/*green*/
background-color: #85c995;
}
input[type="radio"] {
display: none;
}
<div class="row">
<div class="column">
<input type="radio" name="groupA" id="T35" />
<label for="T35" #onclick="() => UpdateTheChart(11)">#Languaje.T35</label>
<input type="radio" name="groupA" id="T36" />
<label for="T36" #onclick="() => UpdateTheChart(12)">#Languaje.T36</label>
<input type="radio" name="groupA" id="T37" />
<label for="T37" #onclick="() => UpdateTheChart(13)">#Languaje.T37</label>
</div>
<div class="column">
<input type="radio" name="groupB" id="T138" />
<label for="T138" #onclick="() => UpdateTheChart(21)">#Languaje.T138</label>
<input type="radio" name="groupB" id="T38" />
<label for="T38" #onclick="() => UpdateTheChart(22)">#Languaje.T38</label>
<input type="radio" name="groupB" id="T39" />
<label for="T39" #onclick="() => UpdateTheChart(23)">#Languaje.T39</label>
<input type="radio" name="groupB" id="T40" />
<label for="T40" #onclick="() => UpdateTheChart(21)">#Languaje.T40</label>
</div>
</div>
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;
}
on my website, while hovering over the "Search" input or on focus, the glyphicon dissapears!
<div class="icon-addon addon-sm">
<input type="text" placeholder="Search (621 videos)" class="form-control" name="searchString" id="searchString">
<label for="searchString" class="glyphicon glyphicon-search" rel="tooltip" title="search"></label>
</div>
you have a problem here
.icon-addon .form-control:focus+.glyphicon, .icon-addon:hover .glyphicon, .icon-addon .form-control:focus+.fa, .icon-addon:hover .fa {
color: #fff;
}
remove .icon-addon:hover .glyphicon from above css or remove color or set difference color: #232323; Your choice.