Customizing SO's snippets selection background

Question

I am currently trying to create a dark SO theme with Stylish. Everything was going great until I had to customize the snippet. I can't seem to change the selection color to any other than the one predefined :

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

I tried adding this, but nothing is changing :

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

Is there anyway to change the selection background here?

Here's the complete CSS from the theme, if it helps :

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

#footer.categories {
    background:#181818 !important;
}

.post-text {
    background:#D5D5D5 !important;
    color:#000000;
}

h1, h2, h3, h4 .page-description td, p, .owner-revision span, .revision span, div.container, #mdhelp pre, .badgecount, .comments, .user-panel-content td, .user-panel-content th, .content-page, .viewcount, .welovestackoverflow, .vote-count-post, .summarycount, #sidebar.module p .vote-count-post, .answer-votes, div.comment-body, h1 a, h4, span.reputation-score, div.module.question-stats p, span.page-numbers, #newsletter-ad, .item-summary, div.new-about-content-page.about-content-page div h2.about-title, .module.newuser, .page-description td, .bulletin-title, .status.answered span, .status.answered div, .label-key b, .excerpt, .answer-help, #mdhelp, .rep-col .rep, .user-card .user-card-name, #avatar-card .reputation {
    color:#C0C0C0 !important;
}

.user-stats .stat span, #avatar-card .badgecount, #badges-table .badges-number {
    color:#666 !important;
}

.revision-comment,  .user-info-rep, .user-info-rep .user-details, .nav.mainnavs li a, .tag-container .col, .tar-container .stat .number, .top-tags .tag-wrapper .tag-container .stat .number, .card, .jobs, .login-link.btn {
    color:#C0C0C0 !important;
    background: #303030 !important;
}

.vote-count-post, .votes {
    color:#E3E3AC !important;
}

span.count, .badge-tag {
    color: #FFFFFF !important;
}

.stats {
    background-color:#C0C0C0 !important;
}

#questions .status.unanswered {
    color:#C23B22 !important;
}

.status.unanswered span {
    color:#777777 !important;    

}

.diff-delete {
    background:#501010 !important;
}

.diff-add {
    color:#A0E0A0 !important;
    background:#105010 !important;
}

#questions .status.answered, .user-about-me, .stats {
    background:#353535 !important;
}

#reputationGraph, .graph {
    background:#FFF !important;
}

.result-highlight {
    color:#FFFFFF !important;
}

#questions .status.answered-accepted {
    background:#759971 !important;
}


.answer-hyperlink:visited{
    color:#A187BE !important;
}

a, h1>a:visited, .answer-hyperlink, .reputation a:visited {
    color:#6ECFF6 !important;
}

.content-block, .on-topic-examples, .off-topic-examples, .topbar .header, .modal-content, .welovestackoverflow, .comment-user, .community-bulletin, .revision td, #nav-askquestion, .answer-votes, #tabs a, .tabs a, .nav.mainnavs li, .question-status, #newsletter-ad .company-ad-b, .company-ad-sb, #hero-content, .module.newuser, .subtabs a.youarehere, .user-show-new .user-header-slim .data, .page-numbers.current, .other-sites, .topbar .topbar-icon-on, .topbar .topbar-icon-on:hover, .answer-help-background, #mdhelp-tabs, .ad502-room, header, .topbar-dialog div.header  {
    background-color:#373737 !important;
}

.owner-revision td, .owner-revision .revision-comment, .owner-revision .user-details{
    background: #4A5287 !important;
}

.comment-user.owner {
    background:#2E5666 !important;
}

.comment-user {
    padding:2px !important;
}

.post-tag, #toc {
    background:#454545 !important;
    border:0px !important;
}

.welovestackoverflow, .topbar-dialog {
    border: 0px !important;
}

.mdhelp-tabs, #hireme {
    border: 1px solid #888 !important;
}

.top-tags .tag-wrapper .tag-container .col {
    border-right:2px solid #888 !important;
}

.module, #question-header, .question-summary, .subheader, #tabs > a, .tabs > a, .company-ad-b, .company-ad-sb, #hero-content, div.subtabs a, .page-numbers, .topbar-dialog li, .user-about-me, .user-show-new .user-header-slim .data, .comment td, .answer, .wmd-input, .wmd-button-bar, .wmd-preview, .grippie, .ad502-room, .card, .progress-bar div {
    border-color:#888 !important;
}

.topbar-dialog {
    background-color:#888 !important;
}

.post-signature.owner, .user-details, .tagged-interesting, #hireme {
    background:#353535 !important;
}

.comment:hover, .js-gps-track:hover, .siteSwitcher-dialog li:hover, .inbox-item:hover, header .topbar-icon-on, header .secondary-nav .-item .-link:hover {
    background:#555555 !important;
}

input {
    background:#E5E5E5 !important;  
    color:#404040 !important;
}

#hmenus a:hover {
    background:#606060 !important;
}

textarea {
    background:#404040 !important;
    color:#C0C0C0 !important;
}

.grippie {
    background:#454545 !important;
}

.feed-icon {
    background-color: rgba(255, 255, 255, 0) !important;
}

/* old logo */
#hlogo a {
    background-image: url("http://i.imgur.com/zeNdkNx.png") !important;
    background-size: 280px;
    width:280px;
    height:90px;
}

/* new header logo */
.so-header .-logo .-img {
    background-image: url("https://i.imgur.com/lLtU6Nd.png") !important;
    background-size: 150px;
    width:150px;
    height:30px;
    background-position:0;
    margin-top:-4px;
    background-repeat:no-repeat;
}


.community-bulletin, .ad502-room {
    box-shadow:none !important;
}

/* code colors */

.post-text {
    background:#282828 !important;
    color:#C0C0C0 !important;
}

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

code { 
    background:#353535 !important;
    color:#C0C0C0 !important;
}

.lit { /* literal */
    color:#FF6961 !important;
}

.tag { /* tag */
    color:#FF6961 !important;
}

.atn {
    color:#C23B22 !important;
}

.atv {
    color:#AEC6CF !important;
}

.str { /* string*/
    color:#C23B22 !important;
}

.pln { /* plain text */
    color:#E0E0E0 !important;
}

.pun { /* punctuation */
    color:#A0A0A0 !important;
}

.com { /* comment */
    color:#ACD372 !important;
}

.kwd { /* keyword */ 
    color:#AEC6CF !important;
}

.typ { /* type */
    color:#7EB1C4 !important;
}

.new-post-activity{
    background-color: inherit;
}

.snippet-code{
    border: none !important;
}

.snippet-holder{
    background: #2a2a2a !important;
}

.CodeMirror-scroll{
    background: #353535 !important;
}

.cm-def,.cm-atom,.cm-attribute,.cm-s-default{
    color: #6262ff !important;
}

.cm-s-default .cm-keyword{
    color: #9e1fb1 !important;
}

.cm-tag{
    color: #44833a !important;
}

.cm-string{
    color: #8d3535 !important;
}

.CodeMirror{
    color: #C0C0C0 !important;
    background: #353535 !important;
}

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

.CodeMirror-gutters{
    background: #424242 !important;
}

#snpte-box-edit-result{
    background: #7d7d7d !important;
}

.snippet-modal .-code .column.result .-name{
    color: #bebfbf !important;
}

.clc-cp-sb--short .-wrapper{
    background-color: #3d3d3d !important;
}

.clc-cp-sb--short .-bg-image:after{
    background-color: #484848 !important;
}

.clc-cp-container .clc-cp-tag{
    background: #454545 !important;
}

.clc-btn-secondary{
    background: #606060 !important;
}

.clc-cp-sb--tall{
    background-color: inherit !important;
    border: none !important;
}

.clc-cp-sb--tall .clc-cp-sb-learnmore-wrap{
    background-color: inherit !important;
}

#hireme{
    margin-bottom: 20px;   
}

.mainbar.reviewable-answer,.comment.js-comment {
    background-color: inherit !important;
}

#new-answer-activity, .new-post-activity{
    background-color: inherit;
}

.p-highlights .-card{
    background-color: inherit;  
    border: 1px solid #e4e6e8;
}

.p-highlights .-graph{
    background-image: url(https://data.zenoo.fr/stackoverflow_lines.svg)
}

aside.-badges>div:first-of-type>div{
    background-color: #202020;
    border-color: #646363;
}

Pourpoint

Aren't the snippets actually an iframe, so the parent frame css wont affect them – Autotruck

Well, I am able to change everything inside the snippets except the ::selection. Backgrounds, colors, borders, etc etc ... Everything is working except that. – Pourpoint

Only thing i can suggest is making it more specific, add predecessor id's and classes to increase the strength – Autotruck

I increased the strength of my selector but nothing changes. Even the Chrome Dev Tools are tellign me the selection is blue, when I can clearly see it's not. – Pourpoint

Could it be something is overlaying it and that is #d7d4f0 as well? I know codemirror is a bit of a bitch to edit/style – Autotruck

When I filter out the CSS rules in the Dev Tools by searching select, I only see both rules : The predefined one and mine. – Pourpoint

i meant like another div or span or some other html element not specifically css – Autotruck

I don't see how a div could have the same size as my current selection :/ I don't see anything else when I hover on the selection with the Dev Selector Tool. – Pourpoint

Is there anyway to write the code using !important less? – Lafountain

@Sluibaren This is a Stylish theme. Most of them rely on !important to change a website's design easily. You don't have to worry about CSS Specificity this way. – Pourpoint

Answer 1

So, thanks to @vals, I noticed that

.CodeMirror-selected {
    background: red;
}

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

was working on its own, but not in my Stylish theme, I finally understood why:

The rule

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

Was overwriting any background we tried to put on the selection. So I added a fix to it, targeting the Snippet line more precisely :

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

Now @vals solution is working :)

Thanks everyone for helping me solve this !

Pourpoint

Answer 2

In codemirror.css, from line 321 you will see:

.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; }

1. Copy these rules into your styleesheet.
2. Try replacing the background-color property with your custom color for all of these rules.
3. Try adding !important.

Shiau

No, It doesn't change anything :/ – Pourpoint

could be also (if you have focus) the next line .CodeMirror-focused .CodeMirror-selected { background: **** } – Fimbria

It's still not changing anything – Pourpoint

@Pourpoint Interesting... I'll take a look. Did you try adding !important to see if it makes a difference? – Shiau

I added the full CSS in my question, if you ever need it. – Pourpoint

@Pourpoint Thanks, updated my answer. Let me know if still no change - it may be order of stylesheets being loaded? – Shiau

Still nothing. I tried the background property aswell as background-color. it can't be the order of stylesheets since every other modification I made is working. – Pourpoint

Can you edit codemirror.css directly? Instead of trying to override the rule in your stylesheet – Shiau

Let us continue this discussion in chat. – Pourpoint

Well, that didn't lead to anything ^^ – Pourpoint

@Pourpoint Sorry, I don't have anything to add beyond my answer. Best of luck finding solution – Shiau

Answer 3

As far as I can tell, my comment on the sol answer is working

.CodeMirror-selected {
    background: red;
}

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

Fimbria

Your answer made me look into why it worked in a new Stylish theme, and not in mine, and I found my answer, I'll post it in a bit. Thanks ! – Pourpoint

Happy that it helped !! – Fimbria

Answer 4

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

::selection {
    background:#d7d4f0;
}

use this code it resolve your problem

Intercollegiate