Tässä oppaassa selitämme erilaisia tapoja muuttaa syötteen paikkamerkin väriä CSS:n avulla.
Tapa 1: Muuta syötteen paikkamerkkiväriä '::placeholder'-valitsimella
CSS ' ::paikanpitäjä ” -valitsinta käytetään lomakeelementtien valitsemiseen paikkamerkkitekstillä. Sitä voidaan käyttää paikkamerkkitekstin vaihtamiseen. Lisäksi voit käyttää tätä valitsinta syötteen paikkamerkin värin muokkaamiseen.
Syntaksi
::placeholderin syntaksi on seuraava:
:: paikanpitäjä {
väri- : arvo
}
'' arvo ”, voit asettaa syötteen paikkamerkin värin valintamme mukaan.
Siirrytään käytännön esimerkkiin, jossa muutamme syötteen paikkamerkin väriä.
Esimerkki
Jos haluat muuttaa syötteen paikkamerkkien väriä, luomme ensin syöttöelementin -tunnisteen avulla ja asetamme syötteen tyypiksi ' teksti ”. Aseta seuraavaksi syötteen paikkamerkin tekstiksi ' Tulla sisään sinun nimesi ”.
HTML
< kehon >< syöttö tyyppi = 'teksti' paikanpitäjä = 'Kirjoita nimesi' >
< / kehon >
Annetun koodin tulos on:
Syötteen paikkamerkin oletusväri näkyy yllä olevassa kuvassa.
Nyt siirrymme CSS:ään ja käytämme ' ::paikanpitäjä ' päästäksesi syötteen paikkamerkin tekstiin ja asettaa sen väriksi ' rgb(17; 0; 255) ”.
CSS
:: paikanpitäjä {väri- : rgb ( 17 , 0 , 255 ) ;
}
Kuten näet, lisätyn syötteen paikkamerkin väri muuttuu siniseksi:
On toinenkin tapa muuttaa syötteen paikkamerkin väriä. Tarkastetaan se.
Tapa 2: Muuta syötteen paikkamerkkiväriä käyttämällä pseudoluokan elementtiä '::-webkit-input-placeholder'
' :: – webkit-input-placeholder ” pseudoluokkaelementti edustaa ensisijaisesti lomakeelementin paikkamerkkitekstiä. Teeman suunnittelijat ja kehittäjät voivat käyttää sitä mukauttaakseen paikkamerkkitekstin ulkoasua. Lisäksi käyttäjä voi muokata syötteen paikkamerkin väriä käyttämällä määritettyä elementtiä.
Syntaksi
::-webkit-input-placeholderin syntaksi annetaan seuraavasti:
:: -webkit-syöttö-paikkamerkki {väri- : arvo
}
'' arvo ”, voit määrittää syötteen paikkamerkin värin.
Siirrytään esimerkkiin ymmärtääksemme edellä käsitellyn pseudoluokkaelementin.
Esimerkki
Käytä CSS-tiedostossa ' ::-webkit-syöttö-paikkamerkki ' pseudoluokan elementti ja määritä värin arvoksi ' rgb(255, 13, 13) ':
:::: -webkit-syöttö-paikkamerkki {väri- : rgb ( 255 , 13 , 13 ) ;
}
Lähtö
Täällä voit nähdä, että syötteen paikkamerkin oletusväri on muuttunut.
Johtopäätös
Syötteen paikkamerkin väriä muutetaan käyttämällä ' ::paikanpitäjä ' valitsin ja ' :: – webkit-input-placeholder ” pseudoluokan elementti. Tämän avulla voit muuttaa syötteen paikkamerkin oletusväriä. Tässä artikkelissa olemme selittäneet syötteen paikkamerkin värin muuttamisen CSS-ominaisuuksien avulla.