CSS ഉപയോഗിച്ച് HTML ഇൻപുട്ട് ഫീൽഡുകളിൽ പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് കളർ എങ്ങനെ മാറ്റാം

CSS ഉപയോഗിച്ച് HTML ഇൻപുട്ട് ഫീൽഡുകളിൽ പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് കളർ എങ്ങനെ മാറ്റാം
Mia Chevalier
2024, ജൂൺ 18, ചൊവ്വാഴ്ച 9:44:18 AM
CSS

CSS ഉപയോഗിച്ച് പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് സ്റ്റൈലിംഗ്

HTML ഫോമുകൾക്കൊപ്പം പ്രവർത്തിക്കുമ്പോൾ, ഇൻപുട്ട് ഫീൽഡുകൾക്കുള്ളിൽ പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റിൻ്റെ രൂപം ഇഷ്ടാനുസൃതമാക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം. Chrome v4 ഉം മറ്റ് ബ്രൗസറുകളും ഇൻപുട്ട്[type=text] ഘടകങ്ങളിൽ പ്ലെയ്‌സ്‌ഹോൾഡർ ആട്രിബ്യൂട്ടിനെ പിന്തുണയ്‌ക്കുന്നുണ്ടെങ്കിലും, ഈ ആട്രിബ്യൂട്ടിലേക്ക് CSS ശൈലികൾ പ്രയോഗിക്കുന്നത് എപ്പോഴും പ്രതീക്ഷിച്ചതുപോലെ പ്രവർത്തിക്കില്ല.

ഉദാഹരണത്തിന്, സ്റ്റാൻഡേർഡ് CSS സെലക്ടറുകൾ ഉപയോഗിച്ച് പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് നിറം മാറ്റാൻ ശ്രമിക്കുന്നത് ആവശ്യമുള്ള ഫലങ്ങൾ നൽകില്ല. ശരിയായ CSS കപട ഘടകങ്ങളും ബ്രൗസർ-നിർദ്ദിഷ്‌ട നിയമങ്ങളും ഉപയോഗിച്ച് നിങ്ങൾക്ക് എങ്ങനെ പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റിൻ്റെ നിറം ഫലപ്രദമായി പരിഷ്‌ക്കരിക്കാമെന്ന് ഈ ലേഖനം പര്യവേക്ഷണം ചെയ്യുന്നു.

കമാൻഡ് വിവരണം
::placeholder ഒരു ഇൻപുട്ട് ഫീൽഡിൻ്റെ പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് സ്‌റ്റൈൽ ചെയ്യാൻ CSS-ലെ ഒരു വ്യാജ ഘടകം ഉപയോഗിക്കുന്നു.
:focus ഒരു ഇൻപുട്ട് ഫീൽഡിൽ ഉപയോക്താവ് ക്ലിക്കുചെയ്യുന്നത് പോലെ, ഒരു ഘടകം ഫോക്കസ് ചെയ്യുമ്പോൾ ശൈലികൾ പ്രയോഗിക്കാൻ CSS-ലെ ഒരു കപട ക്ലാസ് ഉപയോഗിക്കുന്നു.
opacity ഒരു മൂലകത്തിൻ്റെ സുതാര്യത നില നിശ്ചയിക്കുന്ന ഒരു CSS പ്രോപ്പർട്ടി. പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് പൂർണ്ണമായും ദൃശ്യമാണെന്ന് ഉറപ്പാക്കാൻ ഇവിടെ ഉപയോഗിക്കുന്നു.
DOMContentLoaded പ്രാരംഭ HTML പ്രമാണം പൂർണ്ണമായി ലോഡുചെയ്‌ത് പാഴ്‌സ് ചെയ്‌തിരിക്കുമ്പോൾ ഫയർ ചെയ്യപ്പെടുന്ന ഒരു JavaScript ഇവൻ്റ്.
querySelector ഒരു നിർദ്ദിഷ്‌ട CSS സെലക്ടറുമായി പൊരുത്തപ്പെടുന്ന ഡോക്യുമെൻ്റിനുള്ളിലെ ആദ്യ ഘടകം നൽകുന്ന ഒരു JavaScript രീതി.
addEventListener നിലവിലുള്ള ഇവൻ്റ് ഹാൻഡ്‌ലറുകൾ പുനരാലേഖനം ചെയ്യാതെ ഒരു ഘടകത്തിലേക്ക് ഇവൻ്റ് ഹാൻഡ്‌ലറിനെ അറ്റാച്ചുചെയ്യുന്ന ഒരു JavaScript രീതി.
setAttribute നിർദ്ദിഷ്ട ഘടകത്തിൽ ഒരു ആട്രിബ്യൂട്ടിൻ്റെ മൂല്യം സജ്ജമാക്കുന്ന ഒരു JavaScript രീതി. പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് അപ്‌ഡേറ്റ് ചെയ്യാൻ ഇവിടെ ഉപയോഗിക്കുന്നു.

പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് സ്‌റ്റൈലിംഗ് ടെക്‌നിക്കുകൾ മനസ്സിലാക്കുന്നു

ആദ്യ സ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നു ::placeholder, ഒരു ഇൻപുട്ട് ഫീൽഡിൻ്റെ പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് പ്രത്യേകമായി ടാർഗെറ്റുചെയ്യുന്ന ഒരു CSS കപട-ഘടകം. സ്റ്റാൻഡേർഡ് CSS സെലക്ടറുകൾ പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റിനെ ബാധിക്കാത്തതിനാൽ ഇത് നിർണായകമാണ്. ഉപയോഗിച്ച് input::placeholder, പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റിൻ്റെ നിറം ചുവപ്പിലേക്ക് മാറ്റുന്നത് പോലുള്ള ശൈലികൾ നമുക്ക് നേരിട്ട് പ്രയോഗിക്കാൻ കഴിയും. കൂടാതെ, സ്ക്രിപ്റ്റിൽ ബ്രൗസർ-നിർദ്ദിഷ്ട സെലക്ടറുകൾ ഉൾപ്പെടുന്നു input:-moz-placeholder മോസില്ല ഫയർഫോക്സിനും input::-ms-input-placeholder Internet Explorer, Microsoft Edge എന്നിവയ്ക്കായി. ഈ സെലക്‌ടറുകൾ വ്യത്യസ്‌ത ബ്രൗസറുകളിലുടനീളം അനുയോജ്യത ഉറപ്പാക്കുന്നു, ഉപയോക്താവിൻ്റെ ബ്രൗസർ ചോയ്‌സ് പരിഗണിക്കാതെ തന്നെ പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് വർണ്ണം ഒരേ രീതിയിൽ സ്‌റ്റൈൽ ചെയ്യാൻ അനുവദിക്കുന്നു.

പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് വർണ്ണം ചലനാത്മകമായി മാറ്റാൻ രണ്ടാമത്തെ സ്‌ക്രിപ്റ്റ് JavaScript ഉപയോഗിക്കുന്നു. എന്നതിൽ നിന്നാണ് ഇത് ആരംഭിക്കുന്നത് DOMContentLoaded പ്രാരംഭ HTML പ്രമാണം പൂർണ്ണമായി ലോഡുചെയ്‌തതിനുശേഷം മാത്രമേ സ്‌ക്രിപ്‌റ്റ് പ്രവർത്തിക്കൂ എന്ന് ഉറപ്പാക്കാനുള്ള ഇവൻ്റ്. ദി querySelector ഇൻപുട്ട് എലമെൻ്റ് തിരഞ്ഞെടുക്കാൻ രീതി പിന്നീട് ഉപയോഗിക്കുന്നു. ഇവൻ്റുകൾ ഫോക്കസ് ചെയ്യാനും മങ്ങിക്കാനും ഈ ഘടകത്തിലേക്ക് ഇവൻ്റ് ശ്രോതാക്കളെ ചേർക്കുന്നു. ഇൻപുട്ട് ഫീൽഡ് ഫോക്കസ് നേടുമ്പോൾ, പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് മായ്‌ക്കുകയും ഇൻപുട്ട് ടെക്‌സ്‌റ്റ് നിറം കറുപ്പായി സജ്ജീകരിക്കുകയും ചെയ്യും. ഇൻപുട്ട് ഫീൽഡ് ഫോക്കസ് നഷ്‌ടപ്പെടുമ്പോൾ, പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് പുനഃസ്ഥാപിക്കുകയും അതിൻ്റെ നിറം ചുവപ്പായി സജ്ജീകരിക്കുകയും ചെയ്യുന്നു. ദി setAttribute പ്ലെയ്‌സ്‌ഹോൾഡർ ആട്രിബ്യൂട്ട് ഡൈനാമിക്കായി അപ്‌ഡേറ്റ് ചെയ്യുന്നതിന് രീതി ഉപയോഗിക്കുന്നു, പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് പ്രതീക്ഷിച്ചതുപോലെ ദൃശ്യമാകുകയും അപ്രത്യക്ഷമാകുകയും ചെയ്യുന്നു.

CSS ഉപയോഗിച്ച് പ്ലേസ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് നിറം മാറ്റുന്നു

CSS കപട ഘടകങ്ങൾ ഉപയോഗിക്കുന്നു

input::placeholder {
  color: red;
  opacity: 1; /* Firefox */
}

/* For Mozilla Firefox */
input:-moz-placeholder {
  color: red;
  opacity: 1;
}

/* For Internet Explorer 10-11 */
input:-ms-input-placeholder {
  color: red;
}

/* For Microsoft Edge */
input::-ms-input-placeholder {
  color: red;
}

പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് നിറങ്ങൾ കൈകാര്യം ചെയ്യാൻ ബാക്കെൻഡ് ലോജിക് നടപ്പിലാക്കുന്നു

ഡൈനാമിക് പ്ലെയ്‌സ്‌ഹോൾഡർ സ്റ്റൈലിംഗിനായി JavaScript ഉപയോഗിക്കുന്നു

document.addEventListener("DOMContentLoaded", function() {
  var input = document.querySelector('input[type="text"]');

  input.addEventListener('focus', function() {
    input.style.color = "black";
    input.setAttribute('placeholder', '');
  });

  input.addEventListener('blur', function() {
    input.style.color = "red";
    input.setAttribute('placeholder', 'Value');
  });
});

പ്ലെയ്‌സ്‌ഹോൾഡർ സ്റ്റൈലിംഗിനുള്ള നൂതന സാങ്കേതിക വിദ്യകൾ

അടിസ്ഥാന CSS, JavaScript രീതികൾക്കപ്പുറം, പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് സ്‌റ്റൈൽ ചെയ്യുന്നതിനുള്ള കൂടുതൽ വിപുലമായ സാങ്കേതിക വിദ്യകളുണ്ട്. കൂടുതൽ ഡൈനാമിക് സ്റ്റൈലിംഗ് സിസ്റ്റം സൃഷ്ടിക്കാൻ CSS വേരിയബിളുകൾ ഉപയോഗിക്കുന്നതാണ് അത്തരത്തിലുള്ള ഒരു രീതി. CSS വേരിയബിളുകൾ, ഇഷ്‌ടാനുസൃത പ്രോപ്പർട്ടികൾ എന്നും അറിയപ്പെടുന്നു, സ്റ്റൈൽഷീറ്റിലുടനീളം വീണ്ടും ഉപയോഗിക്കാവുന്ന മൂല്യങ്ങൾ സംഭരിക്കാൻ ഡവലപ്പർമാരെ അനുവദിക്കുന്നു. ഒന്നിലധികം ഘടകങ്ങളിൽ ഉടനീളം ശൈലികൾ അപ്ഡേറ്റ് ചെയ്യുന്ന പ്രക്രിയ ഇത് ലളിതമാക്കും. ഉദാഹരണത്തിന്, പ്ലെയ്‌സ്‌ഹോൾഡർ വർണ്ണത്തിനായി ഒരു ഇഷ്‌ടാനുസൃത പ്രോപ്പർട്ടി നിർവചിക്കുന്നതിലൂടെ, ഒന്നിലധികം CSS നിയമങ്ങൾ പരിഷ്‌ക്കരിക്കാതെ നിങ്ങൾക്ക് ഒരിടത്ത് എളുപ്പത്തിൽ നിറം മാറ്റാനാകും.

പരിഗണിക്കേണ്ട മറ്റൊരു വശം, വിപുലമായ സ്റ്റൈലിംഗ് കഴിവുകൾ വാഗ്ദാനം ചെയ്യുന്ന ചട്ടക്കൂടുകളുടെയും ലൈബ്രറികളുടെയും ഉപയോഗമാണ്. ബൂട്ട്‌സ്‌ട്രാപ്പ് പോലുള്ള ലൈബ്രറികളും ടെയിൽവിൻഡ് CSS പോലുള്ള ചട്ടക്കൂടുകളും പ്ലെയ്‌സ്‌ഹോൾഡറുകൾ ഉൾപ്പെടെ സ്റ്റൈൽ രൂപീകരണ ഘടകങ്ങളെ സഹായിക്കുന്ന മുൻനിശ്ചയിച്ച ക്ലാസുകൾ നൽകുന്നു. ഈ ടൂളുകൾക്ക് സമയം ലാഭിക്കാനും ആപ്ലിക്കേഷൻ്റെ വിവിധ ഭാഗങ്ങളിൽ സ്ഥിരത ഉറപ്പാക്കാനും കഴിയും. കൂടാതെ, SASS അല്ലെങ്കിൽ LESS പോലുള്ള പ്രീപ്രൊസസ്സറുകൾ പ്രയോജനപ്പെടുത്തുന്നത്, നെസ്റ്റിംഗ്, മിക്‌സിനുകൾ, ഇൻഹെറിറ്റൻസ് തുടങ്ങിയ സവിശേഷതകൾ ഉപയോഗിച്ച് CSS-നെ കൂടുതൽ മെച്ചപ്പെടുത്താൻ കഴിയും, ഇത് കോഡ് കൂടുതൽ പരിപാലിക്കാവുന്നതും അളക്കാവുന്നതുമാക്കുന്നു.

പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് സ്‌റ്റൈലിംഗ് സംബന്ധിച്ച് പതിവായി ചോദിക്കുന്ന ചോദ്യങ്ങൾ

  1. എല്ലാ ബ്രൗസറുകളിലും എനിക്ക് എങ്ങനെ പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് നിറം മാറ്റാനാകും?
  2. ഉപയോഗിക്കുക ::placeholder, :-moz-placeholder, :-ms-input-placeholder, ഒപ്പം ::-ms-input-placeholder വ്യത്യസ്ത ബ്രൗസറുകളിലുടനീളം അനുയോജ്യത ഉറപ്പാക്കാൻ സെലക്ടർമാർ.
  3. പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് നിറം ഡൈനാമിക്കായി മാറ്റാൻ എനിക്ക് JavaScript ഉപയോഗിക്കാമോ?
  4. അതെ, ഫോക്കസ് ചെയ്യുന്നതിനും ഇവൻ്റുകൾ ബ്ലർ ചെയ്യുന്നതിനും ഇവൻ്റ് ലിസണർമാരെ ചേർക്കാനും തുടർന്ന് ഉപയോഗിക്കാനും നിങ്ങൾക്ക് JavaScript ഉപയോഗിക്കാം setAttribute പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റും അതിൻ്റെ നിറവും മാറ്റാൻ.
  5. എന്താണ് CSS വേരിയബിളുകൾ, പ്ലെയ്‌സ്‌ഹോൾഡറുകൾ സ്‌റ്റൈൽ ചെയ്യാൻ അവയ്ക്ക് എങ്ങനെ സഹായിക്കാനാകും?
  6. സ്റ്റൈൽഷീറ്റിലുടനീളം പുനരുപയോഗിക്കാവുന്ന മൂല്യങ്ങൾ സംഭരിക്കാൻ CSS വേരിയബിളുകൾ നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് ഒന്നിലധികം ഘടകങ്ങളിൽ സ്ഥിരമായി ശൈലികൾ അപ്ഡേറ്റ് ചെയ്യുന്നത് എളുപ്പമാക്കുന്നു.
  7. SASS അല്ലെങ്കിൽ LESS പോലുള്ള CSS പ്രീപ്രൊസസ്സറുകൾ ഉപയോഗിക്കുന്നതിൻ്റെ പ്രയോജനം എന്താണ്?
  8. CSS പ്രീപ്രൊസസ്സറുകൾ നെസ്റ്റിംഗ്, മിക്‌സിനുകൾ, ഇൻഹെറിറ്റൻസ് തുടങ്ങിയ സവിശേഷതകൾ വാഗ്ദാനം ചെയ്യുന്നു, ഇത് CSS കോഡ് കൂടുതൽ പരിപാലിക്കാവുന്നതും അളക്കാവുന്നതുമാക്കുന്നു.
  9. ബൂട്ട്‌സ്‌ട്രാപ്പ് അല്ലെങ്കിൽ ടെയിൽവിൻഡ് CSS പോലുള്ള ചട്ടക്കൂടുകൾക്ക് പ്ലെയ്‌സ്‌ഹോൾഡറുകൾ സ്റ്റൈലിംഗ് ചെയ്യാൻ സഹായിക്കാനാകുമോ?
  10. അതെ, പ്ലെയ്‌സ്‌ഹോൾഡറുകൾ ഉൾപ്പെടെയുള്ള സ്റ്റൈൽ ഫോം ഘടകങ്ങളെ സഹായിക്കാനും സമയം ലാഭിക്കാനും സ്ഥിരത ഉറപ്പാക്കാനും ഈ ചട്ടക്കൂടുകൾ മുൻകൂട്ടി നിശ്ചയിച്ച ക്ലാസുകൾ നൽകുന്നു.
  11. പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് കളർ ആനിമേറ്റ് ചെയ്യാൻ എന്തെങ്കിലും വഴിയുണ്ടോ?
  12. പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റിൻ്റെ നേരിട്ടുള്ള ആനിമേഷൻ സാധ്യമല്ലെങ്കിലും, പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് മാറ്റാനും സമാനമായ ഇഫക്റ്റിനായി ഇൻപുട്ട് ഫീൽഡിലേക്ക് CSS സംക്രമണങ്ങൾ പ്രയോഗിക്കാനും നിങ്ങൾക്ക് JavaScript ഉപയോഗിക്കാം.
  13. പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് സ്‌റ്റൈൽ ചെയ്യാൻ ഇൻലൈൻ CSS ഉപയോഗിക്കാമോ?
  14. ഇല്ല, ഇൻലൈൻ CSS പോലുള്ള കപട ഘടകങ്ങളെ പിന്തുണയ്ക്കുന്നില്ല ::placeholder. നിങ്ങൾ ഒരു സ്റ്റൈൽഷീറ്റ് ഉപയോഗിക്കേണ്ടതുണ്ട് അല്ലെങ്കിൽ എ <style> HTML-ൽ തടയുക.
  15. പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റ് സ്‌റ്റൈൽ ചെയ്യുമ്പോൾ പൊതുവായ ചില പോരായ്മകൾ എന്തൊക്കെയാണ്?
  16. ക്രോസ്-ബ്രൗസർ അനുയോജ്യത കണക്കാക്കാതിരിക്കുക, ഫയർഫോക്‌സിനായി അതാര്യത ഉൾപ്പെടുത്താൻ മറക്കുക, ശരിയായ കപട ഘടകങ്ങളോ ബ്രൗസർ-നിർദ്ദിഷ്ട സെലക്ടറുകളോ ഉപയോഗിക്കാതിരിക്കുക എന്നിവയാണ് പൊതുവായ പോരായ്മകൾ.

പ്ലെയ്‌സ്‌ഹോൾഡർ സ്റ്റൈലിംഗ് ടെക്‌നിക്കുകളെക്കുറിച്ചുള്ള അന്തിമ ചിന്തകൾ

HTML ഇൻപുട്ട് ഫീൽഡുകളിലെ പ്ലെയ്‌സ്‌ഹോൾഡർ ടെക്‌സ്‌റ്റിൻ്റെ നിറം മാറ്റുന്നതിന് CSS, JavaScript സൊല്യൂഷനുകളുടെ സംയോജനം ആവശ്യമാണ്. CSS കപട ഘടകങ്ങളും ബ്രൗസർ-നിർദ്ദിഷ്ട സെലക്ടറുകളും ഉപയോഗിക്കുന്നത് അനുയോജ്യത ഉറപ്പാക്കുന്നു, അതേസമയം JavaScript ഉപയോക്തൃ ഇടപെടലുകളെ അടിസ്ഥാനമാക്കി ചലനാത്മക മാറ്റങ്ങൾ പ്രാപ്തമാക്കുന്നു. CSS വേരിയബിളുകൾ, ചട്ടക്കൂടുകൾ, പ്രീപ്രൊസസ്സറുകൾ എന്നിവ പോലുള്ള നൂതന സാങ്കേതിക വിദ്യകൾക്ക് സ്റ്റൈലിംഗ് പ്രക്രിയയെ കൂടുതൽ മെച്ചപ്പെടുത്താൻ കഴിയും, ഇത് കൂടുതൽ കാര്യക്ഷമവും പരിപാലിക്കാവുന്നതുമാക്കുന്നു. ഈ രീതികളിൽ വൈദഗ്ദ്ധ്യം നേടുന്നത്, ഉപയോക്തൃ അനുഭവം മെച്ചപ്പെടുത്തുന്നതിന്, ഫോം സൗന്ദര്യശാസ്ത്രത്തിൽ മികച്ച നിയന്ത്രണം സാധ്യമാക്കുന്നു.