CSS ಬಳಸಿಕೊಂಡು HTML ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳಲ್ಲಿ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ಹೇಗೆ ಬದಲಾಯಿಸುವುದು

CSS ನೊಂದಿಗೆ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯವನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವುದು

HTML ಫಾರ್ಮ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರಗಳಲ್ಲಿ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯದ ನೋಟವನ್ನು ನೀವು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಬಯಸಬಹುದು. Chrome v4 ಮತ್ತು ಇತರ ಬ್ರೌಸರ್‌ಗಳು ಇನ್‌ಪುಟ್[ಟೈಪ್=ಟೆಕ್ಸ್ಟ್] ಅಂಶಗಳಲ್ಲಿ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಗುಣಲಕ್ಷಣವನ್ನು ಬೆಂಬಲಿಸಿದರೂ, ಈ ಗುಣಲಕ್ಷಣಕ್ಕೆ ಸಿಎಸ್‌ಎಸ್ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುವುದರಿಂದ ಯಾವಾಗಲೂ ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುವುದಿಲ್ಲ.

ಉದಾಹರಣೆಗೆ, ಸ್ಟ್ಯಾಂಡರ್ಡ್ CSS ಸೆಲೆಕ್ಟರ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಲು ಪ್ರಯತ್ನಿಸುವುದು ಅಪೇಕ್ಷಿತ ಫಲಿತಾಂಶಗಳನ್ನು ನೀಡುವುದಿಲ್ಲ. ಸರಿಯಾದ CSS ಹುಸಿ-ಎಲಿಮೆಂಟ್‌ಗಳು ಮತ್ತು ಬ್ರೌಸರ್-ನಿರ್ದಿಷ್ಟ ನಿಯಮಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ನೀವು ಹೇಗೆ ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮಾರ್ಪಡಿಸಬಹುದು ಎಂಬುದನ್ನು ಈ ಲೇಖನವು ಪರಿಶೋಧಿಸುತ್ತದೆ.

ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಟೆಕ್ಸ್ಟ್ ಸ್ಟೈಲಿಂಗ್ ಟೆಕ್ನಿಕ್ಸ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ಮೊದಲ ಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸುತ್ತದೆ ::placeholder, ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರದ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟವಾಗಿ ಗುರಿಪಡಿಸುವ CSS ಹುಸಿ-ಅಂಶ. ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ ಏಕೆಂದರೆ ಸ್ಟ್ಯಾಂಡರ್ಡ್ CSS ಸೆಲೆಕ್ಟರ್‌ಗಳು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ. ಬಳಸಿಕೊಂಡು input::placeholder, ನಾವು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯಕ್ಕೆ ನೇರವಾಗಿ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ ಅದರ ಬಣ್ಣವನ್ನು ಕೆಂಪು ಬಣ್ಣಕ್ಕೆ ಬದಲಾಯಿಸುವುದು. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಸ್ಕ್ರಿಪ್ಟ್ ಬ್ರೌಸರ್-ನಿರ್ದಿಷ್ಟ ಆಯ್ಕೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ input:-moz-placeholder Mozilla Firefox ಗಾಗಿ ಮತ್ತು input::-ms-input-placeholder ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ ಮತ್ತು ಮೈಕ್ರೋಸಾಫ್ಟ್ ಎಡ್ಜ್‌ಗಾಗಿ. ಈ ಸೆಲೆಕ್ಟರ್‌ಗಳು ವಿಭಿನ್ನ ಬ್ರೌಸರ್‌ಗಳಾದ್ಯಂತ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಬಳಕೆದಾರರ ಬ್ರೌಸರ್ ಆಯ್ಕೆಯನ್ನು ಲೆಕ್ಕಿಸದೆ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ಏಕರೂಪವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಬದಲಾಯಿಸಲು ಎರಡನೇ ಸ್ಕ್ರಿಪ್ಟ್ JavaScript ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ. ಇದು ಪ್ರಾರಂಭವಾಗುತ್ತದೆ DOMContentLoaded ಆರಂಭಿಕ HTML ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಮಾಡಿದ ನಂತರವೇ ಸ್ಕ್ರಿಪ್ಟ್ ರನ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಈವೆಂಟ್. ದಿ querySelector ಇನ್‌ಪುಟ್ ಅಂಶವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ವಿಧಾನವನ್ನು ನಂತರ ಬಳಸಲಾಗುತ್ತದೆ. ಈವೆಂಟ್ ಕೇಳುಗರನ್ನು ಕೇಂದ್ರೀಕರಿಸಲು ಮತ್ತು ಈವೆಂಟ್‌ಗಳನ್ನು ಮಸುಕುಗೊಳಿಸಲು ಈ ಅಂಶಕ್ಕೆ ಸೇರಿಸಲಾಗುತ್ತದೆ. ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರವು ಗಮನವನ್ನು ಪಡೆದಾಗ, ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯವನ್ನು ತೆರವುಗೊಳಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಇನ್‌ಪುಟ್ ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ಕಪ್ಪು ಬಣ್ಣಕ್ಕೆ ಹೊಂದಿಸಲಾಗುತ್ತದೆ. ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರವು ಗಮನವನ್ನು ಕಳೆದುಕೊಂಡಾಗ, ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯವನ್ನು ಮರುಸ್ಥಾಪಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅದರ ಬಣ್ಣವನ್ನು ಕೆಂಪು ಬಣ್ಣಕ್ಕೆ ಹೊಂದಿಸಲಾಗುತ್ತದೆ. ದಿ setAttribute ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ನವೀಕರಿಸಲು ವಿಧಾನವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯವು ನಿರೀಕ್ಷೆಯಂತೆ ಗೋಚರಿಸುತ್ತದೆ ಮತ್ತು ಕಣ್ಮರೆಯಾಗುತ್ತದೆ.

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;
}

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 ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಿಧಾನಗಳನ್ನು ಮೀರಿ, ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯವನ್ನು ಶೈಲಿ ಮಾಡಲು ಹೆಚ್ಚು ಸುಧಾರಿತ ತಂತ್ರಗಳಿವೆ. ಅಂತಹ ಒಂದು ವಿಧಾನವು ಹೆಚ್ಚು ಕ್ರಿಯಾತ್ಮಕ ಸ್ಟೈಲಿಂಗ್ ವ್ಯವಸ್ಥೆಯನ್ನು ರಚಿಸಲು CSS ಅಸ್ಥಿರಗಳನ್ನು ಬಳಸುತ್ತಿದೆ. CSS ವೇರಿಯೇಬಲ್‌ಗಳು, ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳು ಎಂದೂ ಕರೆಯಲ್ಪಡುತ್ತವೆ, ಡೆವಲಪರ್‌ಗಳು ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಾದ್ಯಂತ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಮೌಲ್ಯಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಬಹು ಅಂಶಗಳಾದ್ಯಂತ ಶೈಲಿಗಳನ್ನು ನವೀಕರಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಬಣ್ಣಕ್ಕಾಗಿ ಕಸ್ಟಮ್ ಆಸ್ತಿಯನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಮೂಲಕ, ನೀವು ಬಹು CSS ನಿಯಮಗಳನ್ನು ಮಾರ್ಪಡಿಸದೆ ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಬಣ್ಣವನ್ನು ಸುಲಭವಾಗಿ ಬದಲಾಯಿಸಬಹುದು.

ಪರಿಗಣಿಸಬೇಕಾದ ಇನ್ನೊಂದು ಅಂಶವೆಂದರೆ ವಿಸ್ತೃತ ಸ್ಟೈಲಿಂಗ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನೀಡುವ ಚೌಕಟ್ಟುಗಳು ಮತ್ತು ಲೈಬ್ರರಿಗಳ ಬಳಕೆ. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಂತಹ ಲೈಬ್ರರಿಗಳು ಮತ್ತು Tailwind CSS ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್‌ಗಳು ಸೇರಿದಂತೆ ಸ್ಟೈಲ್ ಫಾರ್ಮ್ ಅಂಶಗಳಿಗೆ ಸಹಾಯ ಮಾಡುವ ಪೂರ್ವನಿರ್ಧರಿತ ತರಗತಿಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ. ಈ ಉಪಕರಣಗಳು ಸಮಯವನ್ನು ಉಳಿಸಬಹುದು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿವಿಧ ಭಾಗಗಳಲ್ಲಿ ಸ್ಥಿರತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಹೆಚ್ಚುವರಿಯಾಗಿ, SASS ಅಥವಾ LESS ನಂತಹ ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳನ್ನು ನಿಯಂತ್ರಿಸುವುದರಿಂದ ಗೂಡುಕಟ್ಟುವ, ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ಆನುವಂಶಿಕತೆಯಂತಹ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ CSS ಅನ್ನು ಇನ್ನಷ್ಟು ವರ್ಧಿಸಬಹುದು, ಕೋಡ್ ಅನ್ನು ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಹುದಾದ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ಮಾಡುತ್ತದೆ.

ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಸ್ಟೈಲಿಂಗ್ ಟೆಕ್ನಿಕ್ಸ್‌ನಲ್ಲಿ ಅಂತಿಮ ಆಲೋಚನೆಗಳು

HTML ಇನ್‌ಪುಟ್ ಕ್ಷೇತ್ರಗಳಲ್ಲಿ ಪ್ಲೇಸ್‌ಹೋಲ್ಡರ್ ಪಠ್ಯದ ಬಣ್ಣವನ್ನು ಬದಲಾಯಿಸಲು CSS ಮತ್ತು JavaScript ಪರಿಹಾರಗಳ ಸಂಯೋಜನೆಯ ಅಗತ್ಯವಿದೆ. CSS ಹುಸಿ-ಎಲಿಮೆಂಟ್‌ಗಳು ಮತ್ತು ಬ್ರೌಸರ್-ನಿರ್ದಿಷ್ಟ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸುವುದು ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಆದರೆ JavaScript ಬಳಕೆದಾರರ ಸಂವಹನಗಳ ಆಧಾರದ ಮೇಲೆ ಕ್ರಿಯಾತ್ಮಕ ಬದಲಾವಣೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ. CSS ವೇರಿಯೇಬಲ್‌ಗಳು, ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಮತ್ತು ಪ್ರಿಪ್ರೊಸೆಸರ್‌ಗಳಂತಹ ಸುಧಾರಿತ ತಂತ್ರಗಳು ಸ್ಟೈಲಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಇನ್ನಷ್ಟು ಹೆಚ್ಚಿಸಬಹುದು, ಇದು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲದು. ಈ ವಿಧಾನಗಳನ್ನು ಮಾಸ್ಟರಿಂಗ್ ಮಾಡುವುದರಿಂದ ಫಾರ್ಮ್ ಸೌಂದರ್ಯಶಾಸ್ತ್ರದ ಮೇಲೆ ಉತ್ತಮ ನಿಯಂತ್ರಣವನ್ನು ಅನುಮತಿಸುತ್ತದೆ, ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.