नियंत्रण को अनुकूलित करना

कई डेवलपर्स को डिफ़ॉल्ट नियंत्रण. यह तत्व आम तौर पर एक टेक्स्टबॉक्स और एक बटन प्रदर्शित करता है, जो हमेशा वांछित सौंदर्यशास्त्र के साथ संरेखित नहीं हो सकता है। केवल बटन प्रदर्शित करता है, हम सीएसएस तकनीकों का लाभ उठा सकते हैं। यहां एक प्रभावी समाधान है:

सीएसएस कोड:

/* पोजीशनिंग के लिए कंटेनर डिव को परिभाषित करें */ div.fileinputs { स्थिति: सापेक्ष; } /* नकली फ़ाइल इनपुट को स्टाइल करें जो वास्तविक को ओवरले करता है */ div.fakefile { स्थिति: निरपेक्ष; शीर्ष: 0px; बाएँ: 0px; z-सूचकांक: 1; } /* नकली फ़ाइल इनपुट में बटन को अनुकूलित करें */ div.fakefile इनपुट[प्रकार=बटन] { कर्सर: सूचक; चौड़ाई: 148px; } /* वास्तविक फ़ाइल इनपुट तत्व छिपाएँ */ div.fileinputs इनपुट.फ़ाइल { स्थिति: सापेक्ष; पाठ-संरेखण: दाएँ; -मोज़-अस्पष्टता: 0; फ़िल्टर: अल्फा (अस्पष्टता: 0); अपारदर्शिता: 0; z-सूचकांक: 2; }

HTML Code:

/* Define the container div for positioning */
div.fileinputs {
  position: relative;
}

/* Style the fake file input that overlays the real one */
div.fakefile {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

/* Customize the button in the fake file input */
div.fakefile input[type=button] {
  cursor: pointer;
  width: 148px;
}

/* Hide the real file input element */
div.fileinputs input.file {
  position: relative;
  text-align: right;
  -moz-opacity: 0;
  filter: alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
}

स्पष्टीकरण: