मैं "कोई फ़ाइल नहीं चुनी गई" के स्थान पर "सीवी" रखना चाहता हूं, मैंने फ़ाइल इनपुट पर प्लेसहोल्डर जोड़ने की कोशिश की लेकिन यह काम नहीं करता है

enter image description here

        <div class="col-md-6 form-group ">

          <input type="file" class="col form-control text-field-box mt-3" name="cv" id="files" placeholder="CV" accept="application/pdf" required />
          <label class="ml-3 " 
          style="font-size: 13px;position: absolute;top: 0px;
          font-family: 'Roboto', sans-serif;font-weight: 300;">CV</label>

        </div>
0
Gurmessa Lemma 12 मार्च 2020, 10:03

2 जवाब

कृपया मेरे कोड को ध्यान से देखें और मुझे बताएं कि क्या आपके पास इसके बारे में कोई प्रश्न है। :)

आशा है इससे आपकी मदद होगी।

.file-wrapper .col.form-control{
height: 20px;
background: transparent;
border: 0;
position: absolute;
left: 0;
opacity: 0;
top: 0;
bottom: 0;
width: 100%;
z-index: 1;
}

.file-wrapper .ml-3{
font-size: 13px;
position: relative;
top: 0px;
font-family: 'Roboto', sans-serif;
font-weight: 300;
z-index: 0;
}
<div class="col-md-6 form-group file-wrapper">

    <input type="file" class="col form-control text-field-box mt-3" name="cv" id="files" placeholder="CV" accept="application/pdf" required />
    <label class="ml-3 " 
    style="font-size: 13px;position: absolute;top: 0px;
    font-family: 'Roboto', sans-serif;font-weight: 300;">CV</label>

  </div>
0
jaydeep patel 12 मार्च 2020, 10:11

इसे प्राप्त करने का एक तरीका इनपुट को छिपाना है और लेबल को 'नकली इनपुट' के रूप में उपयोग करना है, जिस तरह से आप इसे चाहते हैं। आपके पास इनपुट पर id और लेबल पर के लिए विशेषता होनी चाहिए (आईडी के समान) ताकि जब आप लेबल पर क्लिक करेंगे तो यह इनपुट को ट्रिगर करेगा। और फिर कुछ बुनियादी जावास्क्रिप्ट के साथ आप लेबल की सामग्री को बदल सकते हैं उदा। प्लेसहोल्डर जब कुछ भी नहीं चुना जाता है और फ़ाइल का नाम कब चुना जाता है।

इनपुट छिपाने का उदाहरण:

    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    width: 0.1px;
    z-index: -1;
0
Zdravko Pernikov 12 मार्च 2020, 10:33