Place a text inside the middle of an input

Question

Having an input form:

.upload-image input {
  height: 100% !important;
  width: 100% !important;
}

.upload-image-container {
  background-color: #f5f7fa;
  height: 192px;
  width: 320px;
}

.upload-logo-label {
  font-family: Open Sans;
  top: 0;
  color: #afafaf;
  z-index: 1;
}

<div className="upload-image upload-image-container">
                <label
                  htmlFor="files"
                  className="upload-logo-label btn"
                  id="image-input">
                  Drag & drop logo here
                  <input
                    name="image"
                    id="image-input"
                    accept="image/*"
                    onChange={console.log('upload image')}
                    multiple
                    type="file"
                    className="imgInp"
                  />
                </label>
              </div>

The problem is that the div creates first the label on top and under it the input. What I want is to place the label (or not mandatory that label but anything that can contain text) in the middle of input.

This is how it looks now:

This is how I want to make it look (ignore the icon for the moment):

Also, only the input is clickable at the moment, the label text isn't and it should be.

Is there a way to do this?

Take a look at [this demo](https://codesandbox.io/s/image-picker-4kcfw?fontsize=14&hidenavigation=1&theme=dark). This is not exactly like you want but it should give you an idea on how to achieve the desired layout. — Yousaf, Jul 06 '20 at 12:27
@Yousaf, I see that in your case in order to upload an image you must click on the button below. In my case I want to make the whole light gray area clickable. It is already clickable but not clickable where is the text situated (at the top of it) — Leo Messi, Jul 06 '20 at 12:28
@LeoMessi I would go for styling the div and text, making the input "hidden" and binding divs JS events to invoke appropriate actions on the input element. — Klemikaze, Jul 06 '20 at 12:31
Should/Could be a dupe of: [How to customize ?](https://stackoverflow.com/questions/5813344/how-to-customize-input-type-file) — Andreas, Jul 06 '20 at 12:32
@Andreas, it's not a duplicate because that solution is not working in this case — Leo Messi, Jul 06 '20 at 12:33
It's not a 100% perfect answer but it shows how to achieve what you're asking for. Hide the `` and style the `` (or any other clickable element) the way you like. — Andreas, Jul 06 '20 at 12:35
I suppose [this](https://codesandbox.io/s/image-picker-4c914?fontsize=14&hidenavigation=1&theme=dark) is what you want? — Yousaf, Jul 06 '20 at 12:40
@Yousaf. yes, it looks good but unfortunately too complicated to implement it in my current code — Leo Messi, Jul 06 '20 at 12:43
@LeoMessi as you can see i edited code to snippet it's not same at your image. you use bootstrap or another framework? — Simone Rossaini, Jul 06 '20 at 13:06
@SimoneRossaini, I don't use boostrap, just SemanticUI but not in this particular case — Leo Messi, Jul 06 '20 at 13:48

score 0 · Answer 1 · answered Jul 06 '20 at 12:44

I actually didnt try it, but something very similar worked, when I made custom checkboxes for one customer. I would go for something like this...

<input name="image"
       id="image-input"
       accept="image/*"
       onChange={console.log('upload image')}
       multiple
       type="file"
       class="imgInp"
       style="display:none" />

<div id="img-div" class="upload-image upload-image-container">
    <label htmlFor="files"
           class="upload-logo-label btn"
           id="image-input">
        Drag & drop logo here

    </label>
</div>

<script type="text/javascript">
    $("#img-div").on("drop", function (event) {
        $("#image-input").trigger("drop", event);
    });

    $("#img-div").on("click", function (event) {
        $("#image-input").trigger("click", event);
    });
</script>

Place a text inside the middle of an input

1 Answers1