ఈ మాన్యువల్‌లో, CSSని ఉపయోగించి ఇన్పుట్ ప్లేస్‌హోల్డర్ రంగును మార్చడానికి మేము వివిధ పద్ధతులను వివరిస్తాము.
విధానం 1: “::placeholder” ఎంపిక సాధనాన్ని ఉపయోగించి ఇన్పుట్ ప్లేస్‌హోల్డర్ రంగును మార్చండి
CSS ' :: ప్లేస్‌హోల్డర్ ” ప్లేస్‌హోల్డర్ టెక్స్ట్‌తో ఫారమ్ ఎలిమెంట్‌లను ఎంచుకోవడానికి సెలెక్టర్ ఉపయోగించబడుతుంది. ప్లేస్‌హోల్డర్ టెక్స్ట్‌ని మార్చడానికి దీనిని ఉపయోగించవచ్చు. అదనంగా, మీరు ఇన్పుట్ ప్లేస్‌హోల్డర్ యొక్క రంగును సవరించడానికి ఈ ఎంపిక సాధనాన్ని ఉపయోగించవచ్చు.
వాక్యనిర్మాణం
:: ప్లేస్‌హోల్డర్ యొక్క వాక్యనిర్మాణం క్రింది విధంగా ఉంది:
:: ప్లేస్‌హోల్డర్ {
రంగు : విలువ
}
స్థానంలో ' విలువ ”, మీరు మా ఎంపిక ప్రకారం ఇన్పుట్ ప్లేస్‌హోల్డర్ రంగును సెట్ చేయవచ్చు.
ఆచరణాత్మక ఉదాహరణకి వెళ్దాం, ఇక్కడ మేము ఇన్పుట్ ప్లేస్‌హోల్డర్ యొక్క రంగును మారుస్తాము.
ఉదాహరణ
ఇన్పుట్ ప్లేస్‌హోల్డర్ రంగును మార్చడానికి, ముందుగా, మేము ట్యాగ్‌ని ఉపయోగించి ఇన్పుట్ మూలకాన్ని సృష్టిస్తాము మరియు ఇన్పుట్ రకాన్ని “ వచనం ”. తర్వాత, ఇన్పుట్ ప్లేస్‌హోల్డర్ యొక్క వచనాన్ని “” నమోదు చేయండి నీ పేరు ”.
HTML
< శరీరం >< ఇన్పుట్ రకం = 'వచనం' ప్లేస్‌హోల్డర్ = 'మీ పేరు రాయుము, మీ పేరు రాయండి' >
< / శరీరం >
ఇచ్చిన కోడ్ యొక్క అవుట్‌పుట్:
ఇన్పుట్ ప్లేస్‌హోల్డర్ యొక్క డిఫాల్ట్ రంగు పైన ఇచ్చిన చిత్రంలో చూపబడింది.
ఇప్పుడు, మేము CSSకి వెళ్లి ' :: ప్లేస్‌హోల్డర్ 'ఇన్పుట్ ప్లేస్‌హోల్డర్ యొక్క వచనాన్ని యాక్సెస్ చేయడానికి మరియు దాని రంగును ఇలా సెట్ చేయడానికి' rgb(17, 0, 255) ”.
CSS
:: ప్లేస్‌హోల్డర్ {రంగు : rgb ( 17 , 0 , 255 ) ;
}
మీరు చూడగలిగినట్లుగా, జోడించిన ఇన్పుట్ ప్లేస్‌హోల్డర్ యొక్క రంగు నీలం రంగులోకి మార్చబడింది:
ఇన్పుట్ ప్లేస్‌హోల్డర్ రంగును మార్చడానికి మరొక పద్ధతి ఉంది. దాన్ని తనిఖీ చేద్దాం.
విధానం 2: '::-webkit-input-placeholder' సూడో-క్లాస్ ఎలిమెంట్ ఉపయోగించి ఇన్పుట్ ప్లేస్‌హోల్డర్ రంగును మార్చండి
' :: – వెబ్‌కిట్-ఇన్పుట్-ప్లేస్‌హోల్డర్ ” సూడో-క్లాస్ ఎలిమెంట్ ప్రాథమికంగా ఫారమ్ ఎలిమెంట్ యొక్క ప్లేస్‌హోల్డర్ టెక్స్ట్‌ని సూచిస్తుంది. ప్లేస్‌హోల్డర్ టెక్స్ట్ రూపాన్ని అనుకూలీకరించడానికి థీమ్ డిజైనర్‌లు మరియు డెవలపర్‌లు దీనిని ఉపయోగించవచ్చు. అదనంగా, పేర్కొన్న మూలకాన్ని ఉపయోగించడం ద్వారా వినియోగదారు ఇన్పుట్ ప్లేస్‌హోల్డర్ యొక్క రంగును సవరించవచ్చు.
వాక్యనిర్మాణం
::-webkit-input-placeholder యొక్క సింటాక్స్ ఇలా ఇవ్వబడింది:
:: -వెబ్‌కిట్-ఇన్పుట్-ప్లేస్‌హోల్డర్ {రంగు : విలువ
}
స్థానంలో ' విలువ ”, మీరు ఇన్పుట్ ప్లేస్‌హోల్డర్ రంగును సెట్ చేయవచ్చు.
పైన చర్చించిన సూడో-క్లాస్ మూలకాన్ని అర్థం చేసుకోవడానికి ఉదాహరణకి వెళ్దాం.
ఉదాహరణ
CSS ఫైల్‌లో, “ని ఉపయోగించండి ::-వెబ్‌కిట్-ఇన్పుట్-ప్లేస్‌హోల్డర్ 'సూడో-క్లాస్ ఎలిమెంట్ మరియు రంగు విలువను ఇలా కేటాయించండి' rgb(255, 13, 13) ”:
:::: -వెబ్‌కిట్-ఇన్పుట్-ప్లేస్‌హోల్డర్ {రంగు : rgb ( 255 , 13 , 13 ) ;
}
అవుట్‌పుట్
ఇక్కడ, ఇన్పుట్ ప్లేస్‌హోల్డర్ యొక్క డిఫాల్ట్ రంగు మార్చబడిందని మీరు చూడవచ్చు.
ముగింపు
ఇన్పుట్ ప్లేస్‌హోల్డర్ యొక్క రంగు “ని ఉపయోగించడం ద్వారా మార్చబడుతుంది :: ప్లేస్‌హోల్డర్ 'సెలెక్టర్ మరియు' :: – వెబ్‌కిట్-ఇన్పుట్-ప్లేస్‌హోల్డర్ ”సూడో-క్లాస్ ఎలిమెంట్. దీన్ని ఉపయోగించి, మీరు ఇన్పుట్ ప్లేస్‌హోల్డర్ యొక్క డిఫాల్ట్ రంగును మార్చవచ్చు. ఈ కథనంలో, CSS లక్షణాలను ఉపయోగించి ఇన్పుట్ ప్లేస్‌హోల్డర్ యొక్క రంగును మార్చడానికి సంబంధించిన విధానాన్ని మేము వివరించాము.