How Would I make it so that when I click a button, the button stays that color until another button is clicked?
To clarify, imagine you have a text box. When you click it, you can add a border because you have it like input:focus{border:#000} and when the input loses focus or another text box is clicked, the border properties go back to the default.
How would I accomplish this with a button. I feel like I'd need to use :after or something.
My Code
button.top_bar {
background-color:#E3E3E3;
border:#DCDCDC 1px solid;
border-radius:3px;
height:40px;
display:block;
color:#000;
postion:relative;
display:block;
float:left;
top:5;
text-transform:capitalize;
font-family:Arial;
font-weight:bold;
cursor:pointer;
margin-left:15px;
}
button.top_bar:hover {
border:#9F9F9F 1px solid;
}
button.top_bar:focus {
border:#9F9F9F 1px solid;
}
The only way I can think of doing this is with jQuery, or some sort of Javascript. Here's how I would do it: I would control it via a class (let's call it ".selectedBorder"). Then on click, grab all your buttons that you have, and turn off the borders for all of them, then just add it on the clicked one. Here's an example:
//first you grab the click event for the button(s)
$("#buttons").click(function(){
//we remove all the borders from all the buttons
$("#buttons").removeClass("selectedBorder");
//Now we add the border to the button that's been clicked
$(this).addClass("selectedBorder");
});
That should do the trick. Just add that in a javascript tag or an external file and include it, and you should be good to go. Hope that helps.
Unlike text inputs, some browsers don't seem to grant focus when button elements are clicked. Add to your button element an attribute onclick="this.focus()" to force the issue. No jQuery needed :-)
Related
below is my html and css it works perfectly fine
current behavior is when the button is pressed background color is green as expected,
after it is released background color is yellow.
but here i want the background color to be blue (normal state).
i cannot remove :focus because on keyboard tab that should work as expected.
what more selectors i have to use to change the background color of the button to blue after released the mouse..
NOTE:- i don't want Jquery or javascript solution i am expecting only css changes.
button { background-color:blue}
button:focus{background-color:yellow}
button:active{background-color:green}
<button>hello</button>
One idea is to consider an extra wrapper that will get the click instead of the button. The trick is to create a transparent layer above using pseudo element and you will still be able to have the focus using the keyboard.
If you have any click handler attached to the button you need to move it the span instead
button { background-color:blue}
button:focus{background-color:yellow}
span:active button{background-color:green;border-style: inset;}
span {
display:inline-block;
position:relative;
}
span:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
<span><button>hello</button></span>
So below is my code. The "active" command in the css block works since when clicking on the div it changes color but when letting go of the click its border should become red as stated in the "target" command in the css block but it doesn't. Ideas?
<html>
<body>
<style type="text/css">
.svar-grid {
margin: 20px;
}
.svar-grid .svar {
padding: 10px;
text-align: center;
margin-top:20px;
width:100%;
border:2px solid black;
border-radius:10px;
background:yellowgreen;
}
.svar-grid .svar:active {
padding: 10px;
text-align: center;
margin-top:20px;
width:100%;
border:2px solid black;
border-radius:10px;
background:green;
}
.svar-grid .svar:target {
padding: 10px;
text-align: center;
margin-top:20px;
width:100%;
border:2px solid red;
border-radius:10px;
background:green;
}
</style>
<html>
<div>
<div class="svar-grid">
<div class="svar"><h4>Testing</h4></div>
</div>
</div>
:target applies to elements with an id attribute which matches the string that appears after the first # character in the URL. This is that that when you link to something specific on a page, it can be highlighted to draw the eye to it.
Since the element doesn't have an id, the :target pseudo-class cannot apply.
:focus applies to elements that have the focus. Clicking on an element will, generally, give it the focus … but only if the element is focusable in the first place.
The point of the focus is so that when interacting with a user interface without using a pointing device (e.g. a mouse, trackpad or touchscreen) you can move between interactive controls via some other mechanism (e.g. pressing the tab key). Then you can trigger (e.g. by pressing Enter) the focused element.
This is only useful if the element does something when triggered (e.g. if it is a link or a button). A div doesn't, by default, do anything when triggered. It is a generic container.
You can add interactivity to an element with JavaScript (addEventListener) and you can mark the element as being interactive by using the tabindex attribute … but you should usually pick a different element (like <button>) instead.
You are looking for :focus.
https://jsfiddle.net/s0L716zu/
HTML
<div class="svar-grid">
<div class="svar" tabindex="-1"><h4>Testing</h4></div>
</div>
CSS
.svar-grid .svar:focus { .... }
As you can see I added tabindex="-1" to the div because a div is not naturally focusable. Giving it -1 tabinde makes is focusable
Here is what :target is supposed to do https://developer.mozilla.org/en-US/docs/Web/CSS/:target, It is meant to be used with the URL
I am not sure why you need focus on the div or if there is any interaction with it. But if there are interaction with the div, you should probably use button or an anchor tag depending on its usage
I would to add my Icon from another link to HTML element, and its clickable.
The icon associated with class, class name icon.
Note:
I need to take icon from another source.
Your suggestion will be advisable
You can use a solution like the following, using a background image:
.icon {
content:"";
width:50px;
height:50px;
background:url('http://placehold.it/50x50');
display:inline-block;
border-radius:50%;
}
Is it possible to disable button moving after clicking on it ?
button
{
background:none;
border:0px;
}
I want button to seem like navigation bar item and need to disable animation during clicking the button.
The animation of a button is caused by the border or outline of your button so if you specify a constant border and remove the outline, then no animation will occur.
button {
outline: none;
border: solid 1px #c5c5c5;
}
You may need to add !important to override click styles
I also was looking to solve this issue and found that it was the padding that was making the button "animate". I had buttons with no background though so you may have to implement #user3481932's answer of adjusting the border and outline styles as well.
I have 3 Divs "button","enableButton" and a "tooltip" in my page. I have set display:none for the "button" by default.
The display property of "button" will change to block on clicking the "enableButton" div.
I have some CSS definition that making the tooltip div's display block on mouse over the button. I used adjacent selector (+) with :hover pseudo selector to make the adjacent "tooltip" div visible.
My problems is the tooltip is not showing on mouse over the button in chrome. It is working correctly in firefox. Can anybody help on this?. Thanks in advance.
HTML:
<div id="enableButton">Click to Enable Button</div>
<br/>
<div style="display:none;" id="button">Button</div>
<div class="tooltip">this is the tooltip</div>
CSS:
#enableButton{cursor:pointer; color:red;}
.tooltip{display:none; padding:5px; border:1px solid #ccc;}
#button{cursor:pointer;}
#button:hover+.tooltip{display:block;}
Javascript:
$("#enableButton").click(function(){
$("#button").show();
});
The code is in this fiddle
Click the Click to Enable Button to make the button visible first and mouse over the button to get the issue
On firefox the tooltip is showing correctly
I'm afraid I dont have an explanation, but I do have a fix.
Demo Fiddle
Add the CSS:
#button {
cursor:pointer;
height:0;
width:0;
overflow:hidden;
}
#button.enabled {
height:auto;
width:auto;
overflow:auto;
}
Then change your jQuery to:
$("#enableButton").click(function () {
$("#button").toggleClass('enabled');
});
Setting:
height:0;
width:0;
overflow:hidden;
Mimics the effect of display:none; which seems to be causing the issue in Chrome. The enabled class then resets these to their default values, causing the button to show when the class is applied.