According to this answer, web selection background colors are dependent on the operating system/browser combination. I would like to change the foreground color of ::selection, but not the background; however, it seems that changing the former causes the latter to become invisible.
//https://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin-to-highlighting-with-your-mouse
function selectText(node) {
node = document.getElementById(node);
if (document.body.createTextRange) {
const range = document.body.createTextRange();
range.moveToElementText(node);
range.select();
} else if (window.getSelection) {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(node);
selection.removeAllRanges();
selection.addRange(range);
}
}
#changed::selection {
color: red;
}
button,
p {
display: inline;
}
<button onclick="selectText('normal')">Select</button>
<p id="normal">This text maintains the standard highlight color, which I want to maintain.</p>
<br>
<button onclick="selectText('changed')">Select</button>
<p id="changed">When I try to change the foreground color of the selection, the background color is unset.</p>
Related
<PageHeader className="site-page-header" title={title} subTitle={subTitle} {...(onBackClick !== undefined ? {onBack: () => { onBackClick() } } : {})} />
And
.site-page-header {
border: 1px solid rgb(235, 237, 240);
background-color: #253655;
}
How can I set the color of title (or any text) in this element to another color (from default black)? I tried to set every color related field I could find in .site-page-header but nothing seems to work.
Inspecting the elements to see why the color prop is not passed down to the title reveals that the class .ant-page-header-heading-title has a color prop which has higher specificity. Either add the !important to the color or increase specificity e.g.
.site-page-header .ant-page-header-heading-title {
color: blue;
}
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 Want to change background color based on child element in HEX
example:
render() {
return (
...
<span>
<h3 style={{ color: item.color }}>Item Color</h3>
</span>
...
}
i have tried mixBlendMode (mix-blend-mode) but this does the reverse of what I am asking,
So if the h3 color is white, and the span backgroundColor is white, i want to change it to black, and the reverse for black, if color=black then background is white
is there any offical CSS way to do this?
and if there any alternative (using JS to detect color from HEX)
if color=white then bgColor=black
if color=black then bgColor=white
(and so for other colors)
There's probably an easier way of doing this, but here's a solution I came up with:
First add a ref tag to the element you want to watch:
<h3 ref={"tag"} style={{ color: item.color }}>Item Color</h3
Than use lifecycle methods to keep track of the color and set that in state in React:
componentDidMount() {
let taggedColor = window.getComputedStyle(this.refs.tag);
this.setState({
taggedColor: taggedColor.color
});
}
componentDidUpdate() {
let taggedColor = window.getComputedStyle(this.refs.tag);
if (taggedColor.color !== this.state.taggedColor) {
this.setState({
taggedColor: taggedColor.color
});
}
}
getComputedStyle converts the HEX to RGB, so now in your span use a conditional based on the RGB :
<span
style={
this.state.taggedColor === "rgb(17, 17, 17)"
? { backgroundColor: "#fff" }
: { backgroundColor: "#111" }
}
className="App"
>
<h3 ref={"tag"} style={{ color: item.color }}>Item Color</h3
</span>
Again I'm sure there's an easier way of doing it but this is what I came up with.
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>
GTK3: I have two GtkLabel widgets in a GtkButton (via a HBox) like this:
[name_label (black) value_label (grey)] - button inactive (white background)
[name_label (white) value_label (yellow)] - button active (black background)
When the button is toggled I want the background to turn black and the two labels should change color accordingly.
Is it possible to do this using CSS only?
This is what I have tried:
from gi.repository import Gtk, Gdk
window = Gtk.Window()
button = Gtk.Button()
hbox = Gtk.HBox()
name = Gtk.Label('Name')
value = Gtk.Label('Value')
value.set_name('value')
hbox.set_spacing(10)
hbox.pack_start(name, expand=False, fill=True, padding=0)
hbox.pack_start(value, expand=False, fill=True, padding=0)
button.add(hbox)
window.add(button)
window.connect('destroy', Gtk.main_quit)
window.show_all()
screen = Gdk.Screen.get_default()
css_provider = Gtk.CssProvider()
css_provider.load_from_path('style.css')
context = Gtk.StyleContext()
context.add_provider_for_screen(screen, css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER)
Gtk.main()
style.css:
.button {
background-color: white;
background-image: none;
}
.button #value {
color: grey;
}
.button:active {
background-color: black;
background-image: none;
color: white;
}
.button:active #value {
color: yellow;
}
The value label remains gray when the button is pressed, so the last section does not apply. Is this something that is expected?
Ok, so I can get this to work by dynamically adding a class to the value label e.g. like this but the original question remains: Can it be done using CSS only?
EDIT: In newer versions of GTK3, e.g. 3.18.9 (the one that is included in Ubuntu Xenial), the CSS-only solution works as expected!
I leave the old solution below for those who are stuck with an older GTK version.
from gi.repository import Gtk, Gdk
window = Gtk.Window()
button = Gtk.Button()
hbox = Gtk.HBox()
name = Gtk.Label('Name')
value = Gtk.Label('Value')
value.set_name('value')
hbox.set_spacing(10)
hbox.pack_start(name, expand=False, fill=True, padding=0)
hbox.pack_start(value, expand=False, fill=True, padding=0)
button.add(hbox)
window.add(button)
window.connect('destroy', Gtk.main_quit)
window.show_all()
screen = Gdk.Screen.get_default()
css_provider = Gtk.CssProvider()
css_provider.load_from_path('style.css')
context = Gtk.StyleContext()
context.add_provider_for_screen(screen, css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER)
ctx = value.get_style_context()
def active(widget):
ctx.add_class('active_value')
def inactive(widget):
ctx.remove_class('active_value')
button.connect('pressed', active)
button.connect('released', inactive)
Gtk.main()
And the corresponding CSS:
.button {
background-color: white;
background-image: none;
}
.button #value {
color: gray;
}
.button #value.active_value { /* value label when the button is pressed */
color:yellow;
}
.button:active {
background-color: black;
background-image: none;
color: white;
}