:: valinta - CSS-temppuja | CSS-almanakka 2025

Valitse tämä lause kursorin avulla. Huomaa, kuinka taustaväri täyttää tilaa valitessasi tekstiä? Voit muuttaa valitun tekstin taustaväriä ja väriä tyylillä ::selection. Tämän pseudoelementin muotoilu sopii erinomaisesti käyttäjän valitseman tekstin sovittamiseen sivustojesi värimalliin.

p::-moz-selection ( color: red) p::selection ( color: red; )

Huomaa, että kaksoispiste on välttämätön tämän pseudoelementin syntaksissa huolimatta siitä, että muut pseudoelementit hyväksyvät yhden kaksoispisteen.

Kuten yllä näkyy, voit muotoilla ::selectionyksittäisiä elementtejä. Voit myös tyylittää koko sivun pudottamalla paljaan pseudoelementin tyylitaulukkoon.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Vain kolme ominaisuutta ::selectiontoimii:

color
background( background-color, background-image)
text-shadow

Katso Kynä :: valintakokeet Chris Coyierilta (@chriscoyier) CodePenillä.

Jos yrität muotoilla ::selectionominaisuudella, jota ei ole luettelossa, kyseinen ominaisuus ohitetaan. Se voi olla hankalaa nähdä backgroundluettelossa, koska ominaisuus renderöi vain värin, kun sitä käytetään, ::selectioneikä se tee taustakuvaa tai kaltevuutta.

Älä myöskään kokeile tätä:

p::-moz-selection, p::selection ( color: red; )

Kun selaimet löytävät osan valitusta, jota he eivät ymmärrä, he pudottavat koko asian, joten tämä epäonnistuu koko ajan.

Yksi hyödyllisimmistä käyttötavoista ::selectionon virran katkaiseminen text-shadowvalinnan aikana. A text-shadowvoi olla ristiriidassa valinnan taustavärin kanssa ja vaikeuttaa tekstin lukemista. Aseta text-shadow: none;tekemään tekstistä selkeän ja helposti luettavan valinnan aikana.

Katso Kynä :: valintateksti-varjo Chris Coyier (@chriscoyier) CodePenistä.

Fancy :: valinta

Pariksi Sassin tai muun esiprosessorin kanssa voit tehdä todella upeita vaikutuksia ::selection. Valitse teksti alla olevasta esittelystä:

Saatat huomata, että vaikutus ei ole niin sujuva joissakin selaimissa. Tallennetaan demo kohtaan: asiat, jotka ovat mahdollisia, mutta luultavasti vain huvin vuoksi.

Toinen tyhmä, mutta hauska pieni temppu on kuvan paljastaminen valitun tekstin kautta.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.