CSS: Change text selection color

Posted About 12 years ago. Visible to the public.

You can change the color for text selection via CSS, using the ::selection and ::-moz-selection pseudo-elements.

Adding this to your Sass will make all text selections use a red background:

::selection
  background-color: #f00

::-moz-selection
  background-color: #f00

Unfortunately, those can't be combined into "::selection, ::-moz-selection". Doing so will have no effect.

Arne Hartherz
makandra.com
Say thanks
Last edit
About 12 years ago
License
Source code in this card is licensed under the MIT License.

Related cards:

CSS: Using the current text color for other color properties

There is a kinda secret, yet well supported CSS feature called currentColor. It's like a special CSS variable that has been supported in almost all browsers for almost all time (see linked Caniuse).

Usage

The currentColor value can be us...

CSS: Giving text lines a background-color (with configurable line padding and margin)

The gist is:

  • wrap the text with a span
  • use line-height for the spacing between lines ("margin")
  • use box-shadow to control the line background size ("padding")

Example

![text_lines_with_background_color.png](https://makandraca...

Use CSS "text-overflow" to truncate long texts

When using Rails to truncate strings, you may end up with strings that are still too long for their container or are not as long as they could be. You can get a prettier result using stylesheets.

The CSS property text-overflow: ellipsis has bee...

Use -webkit-line-clamp to natively truncate long (multi-line) texts with an ellipsis

Note: You won't need this for single lines of text. In this case it is better to just use the text-overflow property: Use CSS "text-overflow" to truncate long texts

You can use -webkit-line-clamp in your CSS/SA...

input: A DOM event that is fired whenever a text field changes

If you're supporting IE9+, you can listen to input to see if a text field changes.

Other than change, it fires while the user is typing and doesn't wait until the user blurs the fie...

mezzoblue § A CSS3 Tip

All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today.

About PIE – CSS3 PIE: CSS3 decorations for IE

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are d...

Disable text selection on iOS and Android devices

When you double-tap a string of text on an iPhone or iPad a complicated context menu for copying and pasting will appear. This can confuse unexperienced users.

Use the Javascript hack below to disable text selection on mobile devices:

// Dea...

Manipulate color with Sass functions

Sass comes with many built-in functions to manipulate color. Some of the more interesting functions include:

adjust-hue($color, $degrees)
Changes the hue of a color.

`lighten($col...

iPhone CSS3 | A CSS3 Experiment by JeffBatterton.com

No images whatsoever.

Posted by Arne Hartherz to makandra dev (2012-02-20 10:07)
This website uses short-lived cookies to improve usability.
or learn more