Customizing SO's snippets selection background - css

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

Answer 1

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; }
Copy these rules into your styleesheet.
Try replacing the background-color property with your custom color for all of these rules.
Try adding !important.

Answer 2

As far as I can tell, my comment on the sol answer is working
.CodeMirror-selected {
background: red;
}
.CodeMirror-focused .CodeMirror-selected {
background: red
}

Answer 3

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 !

Answer 4

::-moz-selection { /* Code for Firefox */
background:#d7d4f0;
}
::selection {
background:#d7d4f0;
}
use this code it resolve your problem