मैं एक छवि को पुट type=file में क्लिक करने योग्य बनाना चाहता हूं कुछ इस तरह

 <label for="formFileSm" class="label_display form-label">avtar</label>

 <input class="width_input mx-auto form-control form-control-sm" id="formFileSm" type="file">

 <img src="photos/gamer.png" class="image_profile width_fix_35" alt="">

मैंने इनपुट छिपाने और आईएमजी में एक क्लिक हैंडलर जोड़ने की कोशिश की (लेकिन मैं सफल नहीं हुआ) मैं आप लोगों की मदद की सराहना करता हूं

-1
holyblast 12 जुलाई 2021, 16:33

2 जवाब

बस img टैग को label में लपेटें और इनपुट पर display:none लागू करें:

input {
  display: none;
}
<label for="formFileSm" class="label_display form-label">avtar <img src="https://www.gravatar.com/avatar/0fdacb141bca7fa57c392b5f03872176?s=48&d=identicon&r=PG&f=1" class="image_profile width_fix_35" alt="">
</label>

<input class="width_input mx-auto form-control form-control-sm" id="formFileSm" type="file">
0
Spectric 12 जुलाई 2021, 13:47

अगर मुझे सवाल सही है तो आप एक कस्टम चयन की तलाश में हैं। आप यहां उदाहरण का अनुसरण कर सकते हैं:

https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

बेशक आप इस खंड में सीएसएस बदलते हुए, अपनी आवश्यकता के अनुसार एक छवि का उपयोग और स्टाइल कर सकते हैं:

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

और पृष्ठभूमि-छवि का उपयोग करना: url ("your_image");

-1
s_frix 12 जुलाई 2021, 13:40