एक इनपुट फ़ील्ड को विभाजित इनपुट के रूप में स्टाइल करना

विभाजित इनपुट फ़ील्ड की एक श्रृंखला बनाने के लिए कई तरीके मौजूद हैं। एक विधि एकल इनपुट फ़ील्ड में वर्णों को अलग करने के लिए "अक्षर-रिक्ति" का उपयोग करती है। इसके अतिरिक्त, "बैकग्राउंड-इमेज" और "बॉर्डर-बॉटम" स्टाइल कई इनपुट फ़ील्ड के भ्रम को और बढ़ा सकते हैं।

CSS Snippet

निम्नलिखित सीएसएस कोड दर्शाता है कि कैसे वांछित प्रभाव पैदा करने के लिए:

#partitioned {
  padding-left: 15px;
  letter-spacing: 42px;
  border: 0;
  background-image: linear-gradient(to left, black 70%, rgba(255, 255, 255, 0) 0%);
  background-position: bottom;
  background-size: 50px 1px;
  background-repeat: repeat-x;
  background-position-x: 35px;
  width: 220px;
  outline: none;
}

HTML कार्यान्वयन

इस सीएसएस का उपयोग करने के लिए, बस अपने पेज पर निम्नलिखित HTML कोड जोड़ें: