How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS or do I have to use Javascript?
Thanks in advance
This is the HTML code of my buttons.
<div class="H1toH5">
<button class="seatButton">H1</button>
<button class="seatButton">H2</button>
<button class="seatButton">H3</button>
<button class="seatButton">H4</button>
<button class="seatButton">H5</button>
</div>
Pure CSS
Change your button to another element (like span)
Use a label and checkbox to control the toggle status
Use :checked CSS selector and + sibling selector
.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; background: yellow; }
.H1toH5 input:checked + .seatButton { background: red; }
<div class="H1toH5">
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
<label>
<input type="checkbox" />
<span class="seatButton">H1</span>
</label>
</div>
How do I make a button change to another color when clicked and when clicked again it goes back to its original color? Can I do by using CSS
Try utilizing css :focus pseudo class , background-color
button {
background-color:yellow;
}
button:focus {
background-color:orange;
}
<div class="H1toH5">
<button class="seatButton">H1</button>
<button class="seatButton">H2</button>
<button class="seatButton">H3</button>
<button class="seatButton">H4</button>
<button class="seatButton">H5</button>
</div>
no just the one that is clicked, but i want to be able to click on
many buttons not just one
var elems = document.getElementsByClassName("seatButton");
for (var i = 0; i < elems.length; i++) {
elems[i].onclick = function() {
var color = window.getComputedStyle(this, null)
.getPropertyValue("background-color");
this.style.backgroundColor = color === "rgb(255, 255, 0)"
? "rgb(255, 165, 0)" : "rgb(255, 255, 0)";
};
};
button {
background-color:yellow;
}
<div class="H1toH5">
<button class="seatButton">H1</button>
<button class="seatButton">H2</button>
<button class="seatButton">H3</button>
<button class="seatButton">H4</button>
<button class="seatButton">H5</button>
</div>
You can do this with css a ::before pseudo element and the html checkbox input tag
input.toggle-btn {
visibility: hidden;
}
input.toggle-btn::before {
content: attr(value);
display: inline-block;
padding: 5px;
background: #fff;
font-size: 14pt;
color: #aaa;
border-radius: 5px;
border: 1px solid #aaa;
visibility: visible;
}
input.toggle-btn:checked::before {
background: rgb(50,150,250);
color: #eee;
border-color: #eee;
}
<input class="toggle-btn" type="checkbox" value="Hello">
This code will toggle a specific class when you click on it. If you click on the button again it will then return to it's original state.
$('.seatButton').click(function () {
$(this).toggleClass('activeClass');
});
Or just use the CSS Pseudo selected as people have specified above. There are many ways to achieve what you want!
No. You need to add/remove a class with javascript. To make #tpie feel better about himself, here is the code for that. Using jQuery:
$('.seatButton').on('click', function(){
$(this).toggleClass('is-active');
});
Related
I am trying to make our dinky radio buttons into lovely toggle buttons on our donation page. The HTML cannot be modified, and as it stands the inputs are wrapped in divs, then followed by the labels. I have zero knowledge of JS/jQuery and I imagine this task requires some.
Here is my fiddle: https://jsfiddle.net/cgz63qhd/
body {
padding: 10px;
font-family: sans-serif;
}
div.donation-levels {
margin: 3px 0;
}
.donation-level-container {
display: inline-block;
}
.donation-level-container input {
visibility: hidden;
}
.donation-level-amount-container {
text-align: center;
margin: 5px 2px;
padding: 0.7em 2em;
color: #ffffff;
background-color: #1a92b4;
border-radius: 5px;
display: inline-block;
cursor: pointer;
font-size: 22px;
}
.donation-level-amount-container:hover {
background: #e8525f;
color: #ffffff;
}
.donation-level-label-input-container input:checked~label {
background: #e8525f;
}
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5942" value="5942" onclick="evalMatchingGift('$35.00');" type="radio">
</div>
<label for="level_flexibleexpanded5942" onclick="">
<div class="donation-level-amount-container">
$35.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5942expandedsubmit" value="true" type="hidden">
</div>
</div>
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5943" value="5943" onclick="evalMatchingGift('$60.00');" type="radio">
</div>
<label for="level_flexibleexpanded5943" onclick="">
<div class="donation-level-amount-container">
$60.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5943expandedsubmit" value="true" type="hidden">
</div>
</div>
<div class="donation-level-container">
<div class="form-content">
<div class="donation-level-input-container form-input">
<div class="donation-level-label-input-container">
<input name="level_flexibleexpanded" id="level_flexibleexpanded5944" value="5944" onclick="evalMatchingGift('$120.00');" type="radio">
</div>
<label for="level_flexibleexpanded5944" onclick="">
<div class="donation-level-amount-container">
$120.00
</div>
</label>
</div>
<input name="level_flexibleexpandedsubmit" id="level_flexible_5944expandedsubmit" value="true" type="hidden">
</div>
</div>
Here is my inspiration donate page: https://action.audubon.org/donate/now
Alas, their labels are set up better so I think they were able to make the buttons with pure CSS (?).
My buttons currently are looking decent, are sized fine and colored nicely, but they just won't stay that coral color when clicked! Can someone help me out?
I've seen a lot of questions here on this topic but I can't seem to get anything to work.
I'm sure there are other issues in the code, please point them out if you see them!
$(".donation-level-amount-container").on("click", function() {
$('.donation-level-amount-container').each(function() {
$(this).removeClass('active');
});
$(this).toggleClass('active');
})
And css
.active {
background:#e8525f;
color:#ffffff;
}
Working fiddle:
https://jsfiddle.net/29exoa4k/2/
You need this piece of jQuery:
$(function() {
$(document).on('click','.donation-level-amount-container',function(){
$('.donation-level-amount-container').removeClass('active');
$(this).addClass('active');
});
});
Update also to this CSS:
.donation-level-amount-container:hover, .donation-level-amount-container.active {
background:#e8525f;
color:#ffffff;
}
Here is the updated jsfiddle.
You want something like this
$(".donation-level-amount-container").on("click", function() {
$(this).css("background", "red");
})
or to toggle an active class
$(".donation-level-amount-container").on("click", function() {
$(this).toggleClass("active");
})
You need this
$(".donation-level-amount-container").on("click", function() {
$(".donation-level-amount-container").css("background", "#1a92b4");
$(this).css("background", "#e8525f");
})
and css !important for background property
.donation-level-amount-container:hover {
background:#e8525f!important;
color:#ffffff;
}
here's your updated fiddle https://jsfiddle.net/cgz63qhd/3/
Indeed, this can not be done with pure CSS, since you can't traverse upward in the DOM using CSS selectors. As previous answers mentioned, it can easily be done with jQuery, but it can also be done in vanilla javascript.
var donationButtons = document.querySelectorAll('.donation-level-amount-container');
var defaultBg = '#1a92b4';
var activeBg = '#f00';
donationButtons.forEach(function(btn){
btn.onclick = function(){
donationButtons.forEach(function(btn){
// deselect previously selected buttons
btn.style.background = defaultBg;
});
this.style.background = activeBg;
}
});
I'm certain this can be done smoother, but this is the first solution that popped up in my head.
I have this code at the moment (following on from earliers question):
input[type=submit]:focus {
background-color: yellow;
outline: none;
}
The problem however, is when I click anywhere else on the screen, the background colour reverts to normal. How can I get it to stay and only change if I click another button?
also a further question, how can I get one particular one to default to a colour when the page loads?
at the moment all the colours are black background until you click one, that turns it yellow and then clicking anywhere else on the page, turns that one back to black
pure JS solutions only please
If you want to change the background until it's changed again by another button, use JS to change the input background instead of just changing on focus. Either add an event listener or do it right from the HTML like:
<input type="submit" onclick="this.style.background='yellow';" />
Then do something similar for your other elements that you want to change the colors for. That way the color change will stay until another button changes it.
In your case, you have a css code, that changes the background of button when the button is focused. In order to make a default background of button, you should remove :focus selector.
input[type=submit] {
background-color: blue;
/* All buttons will be blue after page loaded */
outline: none;
}
input[type=submit]:focus {
background-color: yellow;
}
In your case, you need to change the background-color property using JavaScript.
Here is the working example. We set an active class to that button, which was recently clicked and remove active class from other buttons. You can make this in another way, but the logic is like so.
var buttons = document.querySelectorAll('input[type="button"]');
var resetBackgrounds = function() {
for (var i = 0; i < buttons.length; ++i)
buttons[i].className = '';
}
for (var i = 0; i < buttons.length; ++i) {
buttons[i].onclick = function() {
resetBackgrounds();
this.className = 'active';
}
}
input[type="button"] {
background-color: blue;
outline: none;
color: white;
}
input[type="button"].active {
background-color: black;
}
<input type="button" value="Button1" />
<input type="button" value="Button2" />
<input type="button" value="Button3" />
<input type="button" value="Button4" />
Here's a solution in straight jquery:
$('input')
.on('click',function(){
$('input').css('background','')//reset color
$(this).css('background','yellow')//set color
})
input[type=submit]{
background-color: inherit;
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='submit' />
<input type='submit' />
<input type='submit' />
<input type='submit' />
the equivalent in js vanilla:
var inputs = Array.from(document.querySelectorAll('input'))
inputs.forEach(x => x.addEventListener('click', handler))
function handler(e) {
inputs.forEach(x => x.style.background = 'inherit')
e.target.style.background = 'yellow'
}
input[type=submit] {
background-color: inherit;
outline: none;
}
<input type='submit' />
<input type='submit' />
<input type='submit' />
<input type='submit' />
This is what I'm trying to achieve: buttons.
I can't figure out how to make the buttons contain form data and have only the selected button post to PHP when I click submit.
Here's what I have so far:
var count = 0;
function setColor(btn, color) {
var property = document.getElementById(btn);
if (count == 0) {
property.style.backgroundColor = "#4d4d4d"
property.style.color = "#ffffff"
count = 1;
} else {
property.style.backgroundColor = "#ffffff"
property.style.color = '#0000ff'
count = 0;
}
}
<button type="button" id="button1" onClick="setColor('button1', '#101010')">
<input type="radio" name="rooms" value="1">1
<br>
</button>
<button type="button" id="button2" onClick="setColor('button2', '#101010')">
<input type="radio" name="rooms" value="2">2
<br>
</button>
Also help with resetting the other buttons' colors when I click a new option would be appreciated.
The problem is that your buttons have an onclick listener but the listener is also triggered by events on child elements.
So you can click the button but not the checkbox and it changes its color without modifying the value.
You should use an label instead and with CSS3 you can make it without JavaScript.
HTML:
<div>
<input type="checkbox" id="option1" name="rooms" />
<label for="option1">1</label>
</div>
<div>
<input type="checkbox" id="option2" name="rooms" />
<label for="option2">2</label>
</div>
CSS:
input[type="checkbox"]{
display: none;
}
label{
width: 40px;
height: 20px;
color: #4d4d4d;
background: #FFF;
}
input[type="checkbox"]:checked + label{
background: #4d4d4d;
color: #FFF;
}
If you are okay with using just a little bit of JavaScript, then the following will be exactly what you need:
Code:
var buttons = document.querySelectorAll("button[id^=button]");
[].forEach.call(buttons, function(button) {
button.onclick = function() {
/* Remove the 'checked' attribute from the other inputs */
[].forEach.call(buttons, function(each) {
if (button !== each) [].forEach.call(each.children, function(child) {
if (child.nodeName === "INPUT") child.removeAttribute("checked");
});
});
/* Check the child input */
document.querySelector(this.getAttribute("data-check")).setAttribute("checked", "");
/* Remove the 'clicked' attribute from every button */
[].forEach.call(buttons, function(each) {
each.removeAttribute("clicked");
});
/* Add the 'clicked' attribute to the clicked button */
this.setAttribute("clicked", "");
}
});
Notes:
In order to get the look you want, the input itself must be hidden, so we have to use JavaScript to automatically check the input when the button is clicked.
As you can see I have added a data-check attribute to each button. I did that, in order to avoid having to iterate over each child of each button in order to find the inputs and uncheck them. It basically contains the selector of its input child, so that we can use it to find the input immediately with document.querySelector().
Here's a snippet demonstrating the solution:
/* ----- JavaScript ----- */
var buttons = document.querySelectorAll("button[id^=button]");
[].forEach.call(buttons, function(button) {
button.onclick = function() {
/* Remove the 'checked' attribute from the other inputs */
[].forEach.call(buttons, function(each) {
if (button !== each)[].forEach.call(each.children, function(child) {
if (child.nodeName === "INPUT") child.removeAttribute("checked");
});
});
/* Check the child input */
document.querySelector(this.getAttribute("data-check")).setAttribute("checked","");
/* Remove the 'clicked' attribute from every button */
[].forEach.call(buttons, function(each) {
each.removeAttribute("clicked");
});
/* Add the 'clicked' attribute to the clicked button */
this.setAttribute("clicked", "");
}
});
/* ----- CSS ----- */
input[name="rooms"] {
display: none;
}
button {
background-color: white;
border: 1px solid grey;
border-radius: 50%;
color: dodgerblue;
cursor: pointer;
font-size: 1em;
font-weight: 600;
height: 50px;
outline: none;
transition: background-color .3s ease, color .3s ease;
width: 50px;
}
button[clicked] {
color: white;
background-color: grey;
}
<!----- HTML ----->
<div>
<p style = "font-size: 1.3em">Rooms</p>
<div id="button-wrapper">
<button type="button" id="button1" data-check="[name='rooms'][value='1']" clicked>
<input type="radio" name="rooms" value="1" checked/><span>1</span>
</button>
<button type="button" id="button2" data-check="[name='rooms'][value='2']">
<input type="radio" name="rooms" value="2" /><span>2</span>
</button>
<button type="button" id="button2" data-check="[name='rooms'][value='3']">
<input type="radio" name="rooms" value="3" /><span>3</span>
</button>
<button type="button" id="button2" data-check="[name='rooms'][value='4+']">
<input type="radio" name="rooms" value="4+" /><span>4+</span>
</button>
</div>
</div>
I am using image radio buttons which are working fine. However one of the radio buttons needs to be checked by default. However when this is set, it will not display the border around the checked image as it will when you click to select.
I have tried quite a few different things such has checked via html as well as javascript onload to no avail.
(Note there is only one radio button to select, this is because currently there is no 2nd option however there will be in the near future hence why we are pre checking it)
Any ideas?
<script type="text/javascript">
$(document).ready(function() {
$("a.radio-color-picture").click(function(){
var $id = $(this).attr('id');
$("a.radio-color-picture").removeClass('radio-color-border');
$("a#" + $id).addClass('radio-color-border');
});
});
function set_radio($inputid) {
$("input#" + $inputid).click();
}
</script>
<style type="text/css">
a.radio-color-picture {
border: 2px solid transparent;
display: inline-block;
height: 160px;
margin-right: 10px;
text-decoration: none;
width: 160px;
}
a.radio-color-picture:hover {
border:2px solid #d13a7a;
}
a.radio-color-border {
border:5px solid #d13a7a;
}
a#color {
background: url("<?php echo get_bloginfo('wpurl');?>/wp-content/themes/Impreza/_customimages/thumbnail.jpg") no-repeat scroll 0 0 white;
}
.hidden {
left: -10000px;
position: absolute;
top: -1000px;
}
</style>
<input type="radio" value="CHAR" name="color" id="color" class="hidden" checked="checked" />
<a id="color" href="javascript:set_radio('color');" class="radio-color-picture"> </a>
Cheers :)
This could actually be done much simpler :
Demo
Javascript :
$(document).ready(function(){
$('a.radio-color-picture').click(function(){
$(this).prev('input.hidden').click();
return false;
});
});
HTML (make sure you use unique ids !)
<input type="radio" value="CHAR" name="color" id="color" class="hidden" />
<a data-idinput="color" id="link" class="radio-color-picture"> </a>
<input type="radio" value="CHAR2" name="color" id="color2" class="hidden" checked="checked" />
<a data-idinput="color2" id="link2" class="radio-color-picture"> </a>
<input type="radio" value="CHAR3" name="color" id="color3" class="hidden" />
<a data-idinput="color3" id="link3" class="radio-color-picture"> </a>
And this is the main trick in CSS (only for IE >= 9) :
input.hidden:checked + a {
border:5px solid #d13a7a;
}
Edit : Demo for older versions of IE compatibility
to show the css to default checked you have to add the css 'class' or 'id' by default to the pre checked radio button and its respective href tag.
I'm trying to achieve this but it doesn't work.
Here it is the CSS sheet:
.input_hidden {
position: absolute;
left: -9999px;
}
.selected {
background-color: #000000;
}
#carte label {
border: inline-block;
cursor: pointer;
}
#carte label img {
padding: 3px;
}
the HTML part:
<div id="carte">
Select a card:<BR>
<input type=radio name="carte" id="cart1" class='input_hidden' />
<label for="cart1">
<img src="cart1.jpg" alt="carte1" />
</label>
<input type=radio name="carte" id="cart2" class='input_hidden' />
<label for="cart2">
<img src="cart1.jpg" alt="carte2" />
</label>
<input type=radio name="carte" id="cart3" class='input_hidden' />
<label for="cart3">
<img src="cart3.jpg" alt="carte3" />
</label>
</div>
and the javascript:
$('#carte label').click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
});
When I assign the selected class to an image it is ok, I see it with the black border. but it seems the javascript part to assign the class doesn't work.
I there any other way to assign the correct classes to the images?
Thanks for your support.
Are you sure you want to use jQuery?
With sane browsers you can solve it with pure css: http://jsfiddle.net/VSR86/4/
HTML:
<div id="carte">
<label>
<input type="radio" name="carte" value="cart1" >
<img src="http://placekitten.com/100/100">
</label>
...
CSS:
label input + img {
border: 10px solid transparent;
}
label input:checked + img {
border: 10px solid blue;
}
Of course some javascript fallback will be necessary for IE8 and older.
https://developer.mozilla.org/en-US/docs/Web/CSS/:checked
IE8 fix
Updated CSS:
label input.checked + img,
label input:checked + img {
border: 10px solid blue;
}
JS fallback:
if(/* this browser is IE8 or worse */){
$(document).on('click','label:has(input[type="radio"])',function(){
var $r = $(this).find('input');
adjustRadio( $r.attr('name'), $r.val(), 'checked');
});
}
function adjustRadio( name, value, className ){
// wait for other event handlers to run
setTimeout( function(){
$('input[type="radio"][name="'+name+'"]').each( function(){
var $r = $(this);
$r.toggleClass( className, $r.val() === value );
});
},1);
}
You could use the toggleClass function for some simplicity :)
http://api.jquery.com/toggleClass/
Since people are picky, here's a fiddle for you sir
http://jsfiddle.net/8B3SW/1/
$('#carte label').click(function(){
$(this).toggleClass('selected').siblings().removeClass('selected');;
});