Hide the browse button on a input type=file

前端未结

关注

 10  769

再見小時候

Is there a way to hide the browse button and only leave the text box that works in all browsers?

I have tried setting the margins but they show up different in each

相关标签:

10条回答

刺人心

2020-12-11 15:26

You may just without making the element hidden, simply make it transparent by making its opacity to 0.

Making the input file hidden will make it STOP working. So DON'T DO THAT..

Here you can find an example for a transparent Browse operation;

0 讨论(0)
发布评论:

提交评论
- 加载中...

没有蜡笔的小新

2020-12-11 15:26

Below code is very useful to hide default browse button and use custom instead:

(function($) {
  $('input[type="file"]').bind('change', function() {
    $("#img_text").html($('input[type="file"]').val());
  });
})(jQuery)

.file-input-wrapper {
  height: 30px;
  margin: 2px;
  overflow: hidden;
  position: relative;
  width: 118px;
  background-color: #fff;
  cursor: pointer;
}

.file-input-wrapper>input[type="file"] {
  font-size: 40px;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
}

.file-input-wrapper>.btn-file-input {
  background-color: #494949;
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  height: 34px;
  margin: 0 0 0 -1px;
  padding-left: 0;
  width: 121px;
  cursor: pointer;
}

.file-input-wrapper:hover>.btn-file-input {
  //background-color: #494949;
}

#img_text {
  float: right;
  margin-right: -80px;
  margin-top: -14px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="file-input-wrapper">
    <button class="btn-file-input">SELECT FILES</button>
    <input type="file" name="image" id="image" value="" />
  </div>
  <span id="img_text"></span>
</body>

0 讨论(0)

余生分开走

2020-12-11 15:34
Came across this question and didn't feel like any of the answers were clean. Here is my solution:
```
<label>
  <span>Select file</span>
  <input type="file" style="display: none">
</label>
```
When you click the label the select file dialog will open. No js needed to make it happen.

You can style the label to look like a button.

Here is an example using w3css and font awesome:
```
<label class="w3-button w3-blue w3-round">
    <span><i class="fas fa-image"></i></span>
    <input type="file" style="display: none" >
</label>
```
Of course you need to add an event listener to the input to detect a file was chosen.
0 讨论(0)
发布评论:

提交评论
- 加载中...

南笙

2020-12-11 15:38

Oddly enough, this works for me (when I place inside a button tag).

.button {
    position: relative;

    input[type=file] {
            color: transparent;
            background-color: transparent;
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            top: 0;
            opacity: 0;
            z-index: 100;
        }
}

Only tested in Chrome (macOS Sierra).

0 讨论(0)

上一页 1 2