CODEWITHSUNDEEP
htmlcssselection
russellstephens
russellstephens

Reputation: 33

CSS selection not working around images

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!)

Upvotes: 3

Views: 189

Answers (2)

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

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.

Upvotes: 1

S. Ahn
S. Ahn

Reputation: 663

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>

Upvotes: 1

Related Questions