I was wondering if there was a way to change a button's style, in css, after it's been clicked, so not a element:active.
If you're looking for a pure css option, try using the :focus pseudo class.
#style {
background-color: red;
}
#style:focus {
background-color:yellow;
}
Each link has five different states: link, hover, active, focus and visited.
Link is the normal appearance, hover is when you mouse over, active is the state when it's clicked, focus follows active and visited is the state you end up when you unfocus the recently clicked link.
I'm guessing you want to achieve a different style on either focus or visited, then you can add the following CSS:
a { color: #00c; }
a:visited { #ccc; }
a:focus { #cc0; }
A recommended order in your CSS to not cause any trouble is the following:
a
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }
You can use your web browser's developer tools to force the states of the element like this (Chrome->Developer Tools/Inspect Element->Style->Filter :hov):
Force state in Chrome Developer Tools
It is possible to do with CSS only by selecting active and focus pseudo element of the button.
button:active{
background:olive;
}
button:focus{
background:olive;
}
See codepen: http://codepen.io/fennefoss/pen/Bpqdqx
You could also write a simple jQuery click function which changes the background color.
HTML:
<button class="js-click">Click me!</button>
CSS:
button {
background: none;
}
JavaScript:
$( ".js-click" ).click(function() {
$( ".js-click" ).css('background', 'green');
});
Check out this codepen: http://codepen.io/fennefoss/pen/pRxrVG
Try to check outline on button's focus:
button:focus {
outline: blue auto 5px;
}
If you have it, just set it to none.
What is the code of your button? If it's an a tag, then you could do this:
a {
padding: 5px;
background: green;
}
a:visited {
background: red;
}
A button
Or you could use jQuery to add a class on click, as below:
$("#button").click(function() {
$("#button").addClass('button-clicked');
});
.button-clicked {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Button</button>
If your button would be an <a> element, you could use the :visited selector.
You are limited however, you can only change:
color
background-color
border-color (and its sub-properties)
outline-color
The color parts of the fill and stroke properties
I haven't read this article about revisiting the :visited but maybe some smarter people have found more ways to hack it.
An easy way of doing this is to use JavaScript like so:
element.addEventListener('click', (e => {
e.preventDefault();
element.style = '<insert CSS here as you would in a style attribute>';
}));
all answers is true for hover, focus,...
if you want change background-color when you click and be stay that clicked state, you could do this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
<script>
const element = document.querySelector("body")
let taskDone = false
// function for show button
const elementShow = () => {
element.innerHTML = `
<button id="done-button" style="background-color : ${!taskDone
? "#4dd432" : "#fd67ad"};" onclick=doneTask()>
${!taskDone ? "Done" : "not done yet"}
</button>
`
}
elementShow()
// click Done button
const doneTask = () => {
taskDone = (taskDone ? false : true)
elementShow()
}
</script>
</html>
Related
I'm using Video.js together with Vue.js and Electron.js and I'm trying to change the outline of the video player to something a bit better looking than the standard yellow outline but the outline just stays as it is.
My Video Component:
<template>
<div id="video-container">
<video class="video-js" id="video-player" ref="video"></video>
</div>
</template>
<script>
import videojs from "video.js";
export default {
name: "Preferences",
props: ["item"],
methods: {
getPath: function () {
return this.item.dir + "/" + this.item.name + "." + this.item.fileType;
},
},
mounted: function () {
let options = {
autoplay: false,
controls: true,
fluid: true,
playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2],
controlBar: {
pictureInPictureToggle: false,
},
};
this.player = videojs(this.$refs.video, options).src(this.getPath());
},
};
</script>
<style scoped>
#video-player {
outline: none;
}
</style>
I've also tried !important, #video-player:hover and using the video-container div to change the outline but so far nothing worked.
The outline looks like this:
Video Box outline
button outline
If I understand what you are saying, you are talking about the bowser focus, that blue line around the focus component.
you need something like
.video-js:focus {
outline-style: none;
}
if still not working you can add !important or add this too
.video-js:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
}
Normally we don't remove this for the simple reason that could be hard to use Tab around the components. But if you are ok with that go for it!
EDIT (10/02/2021):
So for the video JS, you can actually use your custom class and overwrite the Video-js CSS class in order to do that you will need to create this 3 follow classes in your CSS.
.vjs-matrix.video-js {
color: #00ff00;
/*put other stuff you need here*/
}
/* Change the border of the big play button. */
.vjs-matrix .vjs-big-play-button {
border-color: #00ff00;
/*put other stuff you need here*/
}
/* Change the color of various "bars". */
.vjs-matrix .vjs-volume-level,
.vjs-matrix .vjs-play-progress,
.vjs-matrix .vjs-slider-bar {
background: #00ff00;
/*put other stuff you need here*/
}
And for your HTML
<video class="vjs-matrix video-js">...</video>
Try to play around with this and see if fix your problem!
Source (videojs)
I am trying to detect click events on an elements ::after pseudo element.
I'm hoping something like this is possible:
//css
div:after{
content:"X";
display:block;
}
//jsx
class PsudoExample extends Component{
render(){
return(
<div onAfterClick={() => {}}>
</div>
)
}
}
Ideally I would like a solution that doesn't involve the use of document.queryselector or something like that.
I don't believe there's a way to distinguish click events from an element and it's pesduo element(s) - the same event handler will fire when the user clicks on either.
One thing you can do though is use CSS to disable pointer-events on the host element, while allowing pointer-events on the element's pseduo element(s). That would give you a "half-way-there" mechanism for detecting clicks on pseduo element(s) only:
div:after{
content:"X";
display:block;
pointer-events: initial;
}
div{
pointer-events:none;
}
With that, you would then use the regular onClick handler which should now only fire when the ::after element is clicked:
class PseudoExample extends Component{
render(){
return(
<div onClick={() => { console.log("after clicked"); }}>
I host a pseduo elements
</div>
)
}
}
Hope that helps!
You can set a click handler on the parent, but that won't tell you that the click was exactly on the "x" button.
Pseudo elements are meant to be used for decoration only. That's why you wouldn't need to write HTML for them and they are fully written in CSS.
If you have an "X" button that does something, you are better off adding a button element for it. Pseudo elements are not made for this. They are also not accessible (cannot have keyboard focus).
class PseudoExample extends React.Component {
render () {
return (
<div>
<button onClick={this.close} type="button" class="close"/>
</div>
)
}
close = () => {
console.log('clicked')
}
}
ReactDOM.render(<PseudoExample/>, document.querySelector('main'))
.close {
border: none;
}
.close:after {
content: "X";
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<main/>
I hate "you are doing it wrong" answers too. But in this case I think a small change (hopefully it's small in your case) is a much better option.
const handleClick = (item, e) => {
let divLength = 210; // depends on your width
if(e.nativeEvent.layerX < divLength) {
//your code goes here
} else {
console.log("clicked after")
}
return (
<div onClick={(e) => handleClick(e)}>Click me</div>
)
e.nativeEvent.layerX returns the width of the clicked area of the element from left to right.
I have a list of statuses , i want the user to select one , not all statuses are enabled some of them will be disabled .
I want the disabled options to have some css styling (like gray color)
<ion-select [(ngModel)]="selectedStatus">
<ion-select-option [disabled]="isStatusDisabled(o)" *ngFor="let o of appointmentStatusOptions" [value]="o">
{{appointmentStatus[o]}}</ion-select-option>
</ion-select>
i have tired to select the element by :disabled like:
ion-select-option[disabled] {
--color:gray;
}
and tried to change all disabled as disperate action like :
:disabled {
--color:gray;
}
the css style doesn't appear at the borwser at all
ionic adds class .select-disabled for the disabled select so you can try to specify that in your css
To change globally you can add this in component style sheet:
::shadow /deep/ button[disabled] .alert-radio-label {
color: gray;
}
Or on global.scss:
ion-alert button[disabled] .alert-radio-label {
color: gray;
// color: var(--ion-color-gray, gray);
}
I would like to highlight a div when it's clicked.
Heres the example: www.spidex.org
On this website if you hover any of the navigation buttons a div on the top of the page is highlighted.
You may use jQuery for achieving this.
get jQuery here.
now consider that you have a div that you want to highlight on mouseover called item.
do this by adding an overlay div.
div.overlay{
opacity:0;
background:#000;
width:100%;
height:100%;
position:absolute;
top:50px;left:0;
}
then use jquery
jQuery(document).ready(function($){
$('.item').mouseover(function(){
$('.overlay').css({opacity:0.3});
});
});
You can change the appearance of elements when hovered using the :hover pseudo-class.
For example
div:hover {
color: red;
}
Secondly, you can change the text color via using the color property and the background color using the background-color property.
Both are shown below:
div:hover {
color: black;
background-color: white;
}
In your given example, when you hover over the primary navigation items in the super-header, then the body dims. I agree with your analysis that this is managed with some cover div of the body.
One cross-browser approach (using jQuery in this example) you might consider would be the following:
EXAMPLE HTML:
<div class="header">
Some Link
</div>
<div class="body">
<div class="body-content">
[ CONTENT HTML ]
</div>
<div class="body-cover"></div>
</div>
EXAMPLE CSS:
.body {
position: relative; /* container needs position */
}
.body-cover {
position: absolute;
top: 0px;
left: 0px;
background-color: blue;
/*
you could use a sligtly transparent background here,
or tween your opacity in your javascript
*/
}
EXAMPLE JavaScript:
// on dom ready
jQuery(function ($) {
// closures
var $links = $('.header a');
var $body = $('.body');
var $content = $body.find('.body-content');
var $cover = $body.find('.body-cover');
var sCoverHiddenCssClassName = 'body-cover-hidden';
var sCoverTweeningCssClassName = 'body-cover-tweening';
var sCoverShowingCssClassName = 'body-cover-showing';
// closure methods
var fMouseOver = function () {
// check to see if hidden (not already tweening or showing)
if ($cover.hasClass(sCoverHiddenCssClassName)) {
// check content, may have changed.
$cover.css({
height: $content.outerHeight(),
width: $content.outerWidth()
});
// animate or tween cover (do this however you want)
$cover
.removeClass(sCoverHiddenCssClassName)
.addClass(sCoverTweeningCssClassName)
.fadeIn(function () {
// when completed, mark as showing/visible
$cover
.removeClass(sCoverTweeningCssClassName)
.addClass(sCoverShowingCssClassName);
});
}
};
var fMouseOut = function () {
// check to see if visible (not already tweening or hidden)
if ($cover.hasClass(sCoverShowingCssClassName)) {
// animate or tween cover (do this however you want)
$cover
.removeClass(sCoverShowingCssClassName)
.addClass(sCoverTweeningCssClassName)
.fadeOut(function () {
// when completed, mark as showing/visible
$cover
.removeClass(sCoverTweeningCssClassName)
.addClass(sCoverHiddenCssClassName);
});
}
};
var fClick = function (e) {
// prevent default if needed for anchors or submit buttons
// e.preventDefault();
if ($cover.hasClass(sCoverHiddenCssClassName)) {
fMouseOver();
}
else if ($cover.hasClass(sCoverShowingCssClassName)) {
fMouseOut();
}
};
// init interaction
$cover.hide().addClass(sCoverHiddenCssClassName);
$links.each(function () {
// wire links
jQuery(this)
.mouseover(fMouseOver)
.mouseout(fMouseOut);//
//.click(fClick); // use click event if desired
});
});
JQuery UI is also gives an good option to quickly highlight div .
https://jqueryui.com/effect/
$( "#divId" ).effect( "highlight", 500 );
I am trying to make a button that has a :hover state on a popup box, when you one of the buttons I am removing the box from the DOM and saving it for future interacts. the problem is when I reattach it to the DOM in IE9 it has not cleared the :hover state until you next hover it then mouse out.
Obviously this is not present on any other browser, but is reproducible here: http://jsfiddle.net/5dXSp/
I cant find a manual way of clearing a css :hover state, and I really dont want to have to rebuild the menu every time because of this. Any thoughts?
Try controlling the hover with a class and jQuery. This seemed to work for me:
http://jsfiddle.net/5dXSp/25/
CSS:
.box{
height:200px;
margin:10px 0;
}
.button{
display:block;
width:200px;
height:20px;
background:#ccc;
}
.hover {
background-color: #000;
}
jQuery:
$(".button").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
$(".button").click(function(ev){
ev.preventDefault();
$(ev.target).appendTo($(".catch"));
$(this).removeClass("hover");
});
There is one additional way to fix it.
You can hide element before detaching it from DOM, but in a different event processing.
Something like that:
// HTML structure: <div id="aaa"> <a id="bbb"> Text </a> </div>
var bbb = document.getElementById('bbb');
var container = document.getElementById('aaa');
bbb.attachEvent("onclick", function() {
bbb.style.display = "none";
window.setTimeout(function() {
container.removeChild(bbb);
bbb.style.display = "";
// Some time later
window.setTimeout(function() {
container.appendChild(bbb);
}, 2000);
}, 1);
});
bbb.style.visibility = "hidden" worked too.
using jquery you can do ugly things like:
if($.browser.msie)
$('el').html($(el).html());
to de and attach the element