CODEWITHSUNDEEP
csshighlight
input
input

Reputation: 7519

selecting/highlighting text with a different color

How do I change the colour of highlight/selection of text? The default is blue.

For example, if you highlight/select the text on this site, it is blue. But on css-tricks.com if the text is highlight/selected, it is orange peach.

Upvotes: 3

Views: 2041

Answers (5)

Sudipa Sengupta
Sudipa Sengupta

Reputation: 405

::selection {
    background: red;
}

::-moz-selection {
    background: red;
}

::-webkit-selection {
    background: red;
}

webkit selection fixed opera issue :)

Upvotes: 0

Andy
Andy

Reputation: 2774

It's a CSS3-only feature, that only Firefox and Safari have implemented so far (as far as I know).

::selection {
    background: #ffb7b7; /* Safari */
}
::-moz-selection {
    background: #ffb7b7; /* Firefox */
}

Upvotes: 2

RoToRa
RoToRa

Reputation: 38400

Why don't you read the css-tricks article on the subject: :-)

http://css-tricks.com/overriding-the-default-text-selection-color-with-css/

Upvotes: 1

Mp0int
Mp0int

Reputation: 18727

::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}

as it is explained in here:

http://css-tricks.com/overriding-the-default-text-selection-color-with-css/

Upvotes: 3

helle
helle

Reputation: 11650

with JS you checkout where the selection is. then you remove it and change the css background-color of the selected text part in to orange ;-)

Upvotes: 1

Related Questions