I am developing an HTML5 web page for mobile. On mobile device, we can't detect hover event. So, how to change the background of button when I press it by my finger?
Update: One simple example of what I want is the button "Google Search" of google main page: https://www.google.com.vn/
Thanks.
I found the solution as below. Hope this helps
button:ACTIVE {
background: aqua;
}
button {
background: green;
}
Related
THE PROBLEM:
In my project, when I select and then unselect a button on mobile, it still remains dark because it's in focus and that's confusing:
Screen recording
Here's the deployed page: https://covid-19-mortality.netlify.com/
WHAT I WANT TO ACHIEVE:
I would like to override the button focused styling so that it is intuitive that the button is in focus and not selected.
WHAT I HAVE TRIED:
I have tried every solution in bootstrap button shows blue outline when clicked.
Try this
.btn:active {
background: #fff !important;
color: #343a40 !important;
}
Triggering the click event depends on the value of transform: scale().
When there is a relative big number, it works, but when there is a small one, it does not work properly.
Does anybody know how to fix it?
Here is my Demo
Try to click on the border in order to see it.
document.querySelectorAll("button").forEach((itm)=>{
itm.addEventListener("click",function(){alert("press")});
})
button{cursor:pointer;user-select:none;outline:none;background-color:#c7ffff}
button{border:25px solid red;box-sizing: border-box;}
#b1:active{transform:scale(0.4)}
#b2:active{transform:scale(0.95)}
<!-- Click on the border on each one of then-->
<!-- Then click on the center, and it works in both-->
<button id="b1">Click Me</button>
<button id="b2">Click Me x2</button>
The problem is the div seems to lose the click event as the active button is now too small and therefore the click is no longer inside the button (try the larger button number but click in the bit that turns white and you will see it has the same problem).
https://developer.mozilla.org/en-US/docs/Web/Events/click - The click event is fired when a pointing device button (usually a mouse's primary button) is pressed and released on a single element.
This means when the button is released, as the mouse is no longer in the button because it was scaled down, the click event for that button won't fire
How about using mousedown to capture the event instead:
document.querySelectorAll("button").forEach((itm) => {
itm.addEventListener("mousedown", function() {
console.log("press"); // changed to console so you can see it fire in the snippet as well as the animation taking place (which wuldn't happen with an alert)
});
})
button {
cursor: pointer;
user-select: none;
outline: none;
background-color: #c7ffff
}
button {
border: 25px solid red;
box-sizing: border-box;
}
#b1:active {
transform: scale(0.4)
}
#b2:active {
transform: scale(0.95)
}
<!-- Click on the border on each one of then-->
<!-- Then click on the center, and it works in both-->
<button id="b1">Click Me</button>
<button id="b2">Click Me x2</button>
I'm trying to create a custom outline for a button and I'm facing issues with Chrome and IE and Edge.
See this codepen: http://codepen.io/alansouzati/pen/dXEWLB
.custom:focus {
outline: black solid 2px;
}
.custom:active,
.custom:hover,
.custom:visited {
outline: 0;
}
In Safari and Firefox I get the expected behavior.
To test it, click the second button (Custom focus). In IE and Edge I'm getting the outline even though I did not press tab. In Safari and Firefox the outline only shows up if I press tab, not when I click the button.
Any suggestions on how to fix this issue for Chrome and IE ?
You can use .blur() in jQuery to avoid focusing after a button is clicked.
function myFunction() {
alert('hi');
}
$(".custom").click(function(e) {
$(this).blur();
myFunction();
});
.custom:focus {
outline: black solid 2px;
}
.custom:active,
.custom:hover,
.custom:visited {
outline: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="myFunction()">Default focus</button>
<br/>
<br/>
<button type="button" class="custom">Custom focus</button>
Your CSS can be simplified to
.custom:focus:not(:active) {
outline: black solid 2px;
}
And then Edge will render the outline just like Chrome, which makes me think the problem has to do with the handling of CSS selector specificity in Edge.
Updated Codepen: http://codepen.io/anon/pen/EgvYPR
Note however that in your example when I click on the second button with the mouse and then move the cursor outside the button before releasing it, the outline appears even if the tab key was not pressed: same behavior in all browsers.
If this is not intended, I'd suggest you switch to a JavaScript solution.
I've been implementing Bootstrap 3 onto my website, and I am currently experiencing this issue after having selecting the Contact button and closing the pop-up window that comes up:
I do not want Contact to be lit up or highlighted in any manner after closing the popup. What do I need to edit in my CSS file to make this work?
Thanks.
EDIT: Here is my code showing my nav-bar with all of my options. I believe I'm supposed to select something in here in order to edit the CSS of the Contact area.
In CSS, the focus pseudo class is used for styling an element that is currently targeted by the keyboard, or activated by the mouse.
By clicking on the button, Bootstrap adds styles to your button via btn:focus, btn-primary:focus, et cetera. One of the styles Bootstrap adds is a border around the button. In order to override this style, you can create a selector that hides the border of your button. For example, you could do something like this.
.btn:focus {
border: none;
}
If this doesn't work, try
.btn:focus {
border: none !important;
}
This will do it for you see example: https://jsfiddle.net/DIRTY_SMITH/LLvkptuk/
Add this to your CSS:
.btn:focus,
.btn:active {
outline: none !important;
}
Check this
input[type="button"]:focus,
input[type="submit"]:focus {
outline: none !important;
} /* for forms */
a:focus {
outline: none !important;
} /* for anchor */
Do you know how on facebook, when you get notifications, the globe goes white, then you click on it to see them because your so happy. The color stays white on the globe unless you click out OR click the globe. I have the exact same situation. But when I click on the globe. My icon stays white. UNLESS I click out anywhere then it loses that white color. I want to be able to click on the icon and then expect for the colour to go away.
scss:
.navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
.nav-badges {
margin-left: 20px;
& > li { height: 50px; }
.dropdown > a:focus { outline: 0px none; }
.dropdown-open {
background-color: $dropdown-bg;
& > a { color: $dropdown-link-color; }
.dropdown-menu { display: block; }
}
its pretty self explanitory, when icon is not clicked, then dropdown is in play, when it is clicked, dropdown dropdown-open is in play.
So for sure facebook use some JavaScript tricks with ReactJs it's pretty straight forward.
But, I think you can use a CSS3 trick with a hidden checkbox and a label. This trick looks to match perfectly your use case.
It's bad for accessibility, it's tricky and you should probably go for some JavaScript. But it's fun.
You can add a fixed overlay than also uncheck the hidden checkbox. Like this, when clicking outside the menu, the checkbox will be unchecked and your menu will go back to a normal state.
This is the only pure CSS implementation I can see.
But again, use JavaScript for this kind of behaviour.