இந்த கையேட்டில், CSS ஐப் பயன்படுத்தி உள்ளீட்டு ஒதுக்கிடத்தின் நிறத்தை மாற்றுவதற்கான பல்வேறு முறைகளை விளக்குவோம்.
முறை 1: ':: placeholder' தேர்வியைப் பயன்படுத்தி உள்ளீட்டு ப்ளேஸ்ஹோல்டர் நிறத்தை மாற்றவும்
CSS” :: ஒதுக்கிட ” ஒதுக்கீட்டு உரையுடன் படிவ உறுப்புகளைத் தேர்ந்தெடுக்க தேர்வி பயன்படுத்தப்படுகிறது. ஒதுக்கிட உரையை மாற்ற இதைப் பயன்படுத்தலாம். கூடுதலாக, உள்ளீட்டு ஒதுக்கிடத்தின் நிறத்தை மாற்ற இந்தத் தேர்வியைப் பயன்படுத்தலாம்.
தொடரியல்
:: ப்ளாஸ்ஹோல்டரின் தொடரியல் பின்வருமாறு:
:: இடப்பெயர்ச்சி {
நிறம் : மதிப்பு
}
என்ற இடத்தில் ' மதிப்பு ”, எங்கள் விருப்பப்படி உள்ளீட்டு ஒதுக்கிடத்தின் நிறத்தை நீங்கள் அமைக்கலாம்.
நடைமுறை உதாரணத்திற்கு செல்லலாம், அங்கு உள்ளீட்டு ஒதுக்கிடத்தின் நிறத்தை மாற்றுவோம்.
உதாரணமாக
உள்ளீட்டு ஒதுக்கிட நிறத்தை மாற்ற, முதலில், குறிச்சொல்லைப் பயன்படுத்தி உள்ளீட்டு உறுப்பை உருவாக்கி, உள்ளீட்டின் வகையை “ என அமைப்போம். உரை ”. அடுத்து, உள்ளீட்டு ஒதுக்கிடத்தின் உரையை “ என அமைக்கவும் உள்ளிடவும் உங்கள் பெயர் ”.
HTML
< உடல் >< உள்ளீடு வகை = 'உரை' இடப்பெயர்ச்சி = 'உங்கள் பெயரை உள்ளிடவும்' >
< / உடல் >
கொடுக்கப்பட்ட குறியீட்டின் வெளியீடு:
உள்ளீட்டு ஒதுக்கிடத்தின் இயல்புநிலை நிறம் மேலே கொடுக்கப்பட்ட படத்தில் காட்டப்பட்டுள்ளது.
இப்போது, நாம் CSS க்குச் சென்று ' :: ஒதுக்கிட 'உள்ளீட்டு ஒதுக்கிடத்தின் உரையை அணுகி அதன் நிறத்தை அமைக்கவும்' rgb(17, 0, 255) ”.
CSS
:: இடப்பெயர்ச்சி {நிறம் : rgb ( 17 , 0 , 255 ) ;
}
நீங்கள் பார்க்க முடியும் என, சேர்க்கப்பட்ட உள்ளீட்டு ஒதுக்கிடத்தின் நிறம் நீலமாக மாற்றப்பட்டது:
உள்ளீட்டு ஒதுக்கிடத்தின் நிறத்தை மாற்ற மற்றொரு முறை உள்ளது. அதை சரிபார்ப்போம்.
முறை 2: '::-webkit-input-placeholder' போலி-வகுப்பு உறுப்புகளைப் பயன்படுத்தி உள்ளீட்டு ப்ளேஸ்ஹோல்டர் நிறத்தை மாற்றவும்
' :: – webkit-input-placeholder ” போலி-வகுப்பு உறுப்பு முதன்மையாக ஒரு படிவ உறுப்புக்கான ஒதுக்கிட உரையைக் குறிக்கிறது. ஒதுக்கிட உரையின் தோற்றத்தைத் தனிப்பயனாக்க தீம் வடிவமைப்பாளர்கள் மற்றும் டெவலப்பர்களால் இதைப் பயன்படுத்தலாம். கூடுதலாக, குறிப்பிட்ட உறுப்பைப் பயன்படுத்துவதன் மூலம் பயனர் உள்ளீட்டு ஒதுக்கிடத்தின் நிறத்தை மாற்றலாம்.
தொடரியல்
::-webkit-input-placeholder இன் தொடரியல் பின்வருமாறு கொடுக்கப்பட்டுள்ளது:
:: -webkit-input-placeholder {நிறம் : மதிப்பு
}
என்ற இடத்தில் ' மதிப்பு ”, நீங்கள் உள்ளீட்டு ஒதுக்கிடத்தின் நிறத்தை அமைக்கலாம்.
மேலே விவாதிக்கப்பட்ட போலி-வகுப்பு உறுப்பைப் புரிந்துகொள்ள உதாரணத்திற்குச் செல்வோம்.
உதாரணமாக
CSS கோப்பில், '' ஐப் பயன்படுத்தவும் ::-webkit-input-placeholder ” போலி-வகுப்பு உறுப்பு மற்றும் வண்ணத்தின் மதிப்பை இவ்வாறு ஒதுக்கவும் rgb(255, 13, 13) ”:
:::: -webkit-input-placeholder {நிறம் : rgb ( 255 , 13 , 13 ) ;
}
வெளியீடு
உள்ளீட்டு ஒதுக்கிடத்தின் இயல்புநிலை நிறம் மாற்றப்பட்டிருப்பதை இங்கே காணலாம்.
முடிவுரை
உள்ளீடு ஒதுக்கிடத்தின் நிறம் '' ஐப் பயன்படுத்தி மாற்றப்படுகிறது :: ஒதுக்கிட 'தேர்வுக்குழு மற்றும்' :: – webkit-input-placeholder ” போலி வர்க்க உறுப்பு. இதைப் பயன்படுத்தி, உள்ளீட்டு ஒதுக்கிடத்தின் இயல்புநிலை நிறத்தை மாற்றலாம். இந்தக் கட்டுரையில், CSS பண்புகளைப் பயன்படுத்தி உள்ளீட்டு ஒதுக்கிடத்தின் நிறத்தை மாற்றுவது தொடர்பான செயல்முறையை விளக்கியுள்ளோம்.