Personalizing the snippets selection background on Stack Overflow

Question

Personalizing the snippets selection background on Stack Overflow

I'm currently working on designing a custom dark theme for Stack Overflow using Stylish. Everything was going smoothly until I encountered an issue while customizing a particular snippet. I'm having trouble changing the selection color to something other than the default one specified:

.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{
    background:#d7d4f0;
}

I attempted to add the following code, but it doesn't seem to have any effect:

.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{
    background: blue !important;
}

Is there a way to modify the selection background in this case?

Here's the complete CSS code from the theme, in case it provides any useful information:

body, #questions div, .qa-block, #content {
    background:#282828 !important;
}

#footer.categories {
    background:#181818 !important;
}
...
/* The rest of the CSS code continues here */
...

css selection code-snippets

Answer 1

Answer №1

Open up codemirror.css and navigate to line 321 where you'll find the following CSS rules:

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

Ensure to include these rules in your stylesheet.
Experiment with changing the background-color property to a custom color for each of these rules.
Consider adding !important to see how that affects the styles.

Answer 2

Open up codemirror.css and navigate to line 321 where you'll find the following CSS rules:

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

Ensure to include these rules in your stylesheet.
Experiment with changing the background-color property to a custom color for each of these rules.
Consider adding !important to see how that affects the styles.

Answer 3

Answer №2

It seems that my feedback on the solution answer is effective.

.CodeMirror-selected {
    background: blue;
}

.CodeMirror-focused .CodeMirror-selected {
    background: blue;
}

https://i.sstatic.net/uPDLF.png

Answer 4

It seems that my feedback on the solution answer is effective.

.CodeMirror-selected {
    background: blue;
}

.CodeMirror-focused .CodeMirror-selected {
    background: blue;
}

https://i.sstatic.net/uPDLF.png

Answer 5

Answer №3

Big shoutout to @vals for pointing out something interesting:

.CodeMirror-selected {
    background: red;
}

.CodeMirror-focused .CodeMirror-selected {
    background: red
}

It seems that the above code was functioning perfectly fine on its own, but not within my Stylish theme. After some investigation, I finally discovered the reason:

The following rule was causing interference by overriding any background changes we attempted to make on the selection:

.prettyprint, blockquote, pre, pre>.spaces, .hi, .badge-tag {
    background:#353535 !important;
}

To address this issue, I made a targeted adjustment to specifically focus on the Snippet line:

pre.CodeMirror-line{
  background: inherit !important;  
}

Thanks to implementing @vals' solution, everything is now working smoothly :)

I appreciate everyone who contributed to helping me resolve this issue!

Answer 6

Big shoutout to @vals for pointing out something interesting:

.CodeMirror-selected {
    background: red;
}

.CodeMirror-focused .CodeMirror-selected {
    background: red
}

It seems that the above code was functioning perfectly fine on its own, but not within my Stylish theme. After some investigation, I finally discovered the reason:

The following rule was causing interference by overriding any background changes we attempted to make on the selection:

.prettyprint, blockquote, pre, pre>.spaces, .hi, .badge-tag {
    background:#353535 !important;
}

To address this issue, I made a targeted adjustment to specifically focus on the Snippet line:

pre.CodeMirror-line{
  background: inherit !important;  
}

Thanks to implementing @vals' solution, everything is now working smoothly :)

I appreciate everyone who contributed to helping me resolve this issue!

Answer 7

Answer №4

::-moz-selection { /* Styling for Firefox */
   background:#d7d4f0;
}

::selection {
    background:#d7d4f0;
}

Try using this CSS code to fix the issue you are experiencing.

Answer 8

::-moz-selection { /* Styling for Firefox */
   background:#d7d4f0;
}

::selection {
    background:#d7d4f0;
}

Try using this CSS code to fix the issue you are experiencing.

Personalizing the snippets selection background on Stack Overflow

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Enhancing webpage design by dynamically changing borders and headers using JavaScript

Utilizing d3.js to implement a scatterplot with zoom functionality that focuses solely on zooming the axis without affecting

Create a navigation bar using CSS that is designed from an unordered list without any specific

What is the best way to create non-standard text wrapping in HTML and CSS that is both semantic and sleek, avoiding square or circular shapes?

Error loading CSS file on Google App Engine

I am trying to make my CSS divs remain in the exact same position on the background image, even when the browser is resized both horizontally and vertically. How can I achieve this?

Concealing and revealing an element using the CSS property visibility:hidden/visible

Ensure that the child div completely fills the entire width of its parent container,

The CSS style of the Div element is not being displayed properly when embedded with JavaScript

What can I do to keep my navbar on top of the slideshow?

Animating with React using the animationDelay style does not produce the desired effect

The paragraph tag remains unchanged

maintain visibility of website menu while scrolling

Using an image as a dropdown menu in HTML: A step-by-step guide

Utilize a CSS rule exclusively if the following div element is present - Purely CSS, no need

increasing the size of the drop-down menu width

Displaying a banner at the bottom of a React page

Issue with a input element having relative positioning within a flexbox

Displaying two dropdown menus with just a single coding component

Solutions for concealing the current div when clicking on a new div that reveals a fresh one