3

I'm trying to change the selection colour on my website but it seems to be causing a problem when selecting around images. Essentially the white space around the images comes out in the default blue whereas everything else comes out in the correct yellow colour.

This is the HTML:

<h2>Achievements</h2>
<img src="img/atlassian.png" />
<p>The most reputable and successful start-up in Australian history. Led the design for Confluence over 4 years.</p>

This is the CSS:

::selection {
background: #fade70; /* Safari & Chrome */
color: #333;
}
::-moz-selection {
background: #fade70; /* Firefox */
color: #333;
}

Any idea how I could fix this? Really appreciate your help!

(I tried uploading an image but I didn't have the reputation points, sorry!)

4
  • The selection pseudo-selector has very poor support across browsers, don't expect it to work consistently.
    – Etheryte
    May 27, 2014 at 23:31
  • "Only a small subset of CSS properties can be used in a rule using ::selection in its selector: color, background, background-color and text-shadow. Note that, in particular, background-image is ignored, like any other property." source: developer.mozilla.org/en-US/docs/Web/CSS/::selection
    – Mike Koch
    May 27, 2014 at 23:32
  • 1
    @Mike Koch: But the OP isn't using any disallowed properties...
    – BoltClock
    May 27, 2014 at 23:36
  • Yes, I just realized that actually. But it still isn't a well-supported selector
    – Mike Koch
    May 27, 2014 at 23:37

2 Answers 2

1

I'm pretty sure it's because img is not a block element. You can either enclose it in a div

<div>
<img src="http://placekitten.com/200/200?image=3" />
</div>

or style the img with display:block, something like this.

<img class="block" src="http://placekitten.com/200/200?image=3" />

.block {
    display: block;
}

UPDATE: If you want it to be an inline element, you don't need a div or styling for the selection colour to be correct. For example,

<p>This text is before the image <img src="" /> and this text is after it.</p>
3
  • Doesn't appear to work if you have text above and/or below the image: jsfiddle.net/r4LaY/1
    – Mike Koch
    May 27, 2014 at 23:34
  • By keeping the img outside of a block element, you are treating it as one, but you aren't wrapping it in a block.
    – S. Ahn
    May 27, 2014 at 23:38
  • Thanks so much! Wrapping it in a div worked perfectly. The display: block suggestion worked as well but changed my padding so I went with the div. Thanks again! May 28, 2014 at 14:03
1

The ::selection pseudo class was drafted for CSS Selectors Level 3 but removed before it reached the Recommendation status. It's not really supposed to be relied on as a fully implemented standard.

2
  • Pseudo-element, not pseudo-class. Hence the double colons.
    – BoltClock
    May 27, 2014 at 23:35
  • Thanks for the advice, was already aware but I appreciate you letting me know. May 28, 2014 at 14:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.