Question

我已经在右侧创建了带有搜索按钮的文件上传。这个只在chrome中正确显示，但我需要它来支持所有现代浏览器。我曾在Mozilla中尝试过，但这并不受支持。任何人都可以帮我解决这个问题。谢谢。

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Roboto);
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 16px
}

body {
  background-color: #fff;
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  font-size: 1rem;
}

.container {
  margin: 20px auto;
  max-width: 1140px;
  padding: 25px 25px;
  border: 1px solid #000;
}

.row {
  clear: both;
}

#myInput {
  width: 85%;
  border: 1px solid #000;
  display: inline-block;
}

input[type=file]::-webkit-file-upload-button {
  width: 0;
  padding: 0;
  margin: 0;
  -webkit-appearance: none;
  border: none;
  border: 0px;
}

x::-webkit-file-upload-button,
input[type=file]:after {
  -webkit-appearance: button;
  border-collapse: separate;
  border-radius: 7px;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  content: 'Search';
  color: #080708;
  background: #e3e3e3;
  text-decoration: none;
  display: inline-block;
  left: 100%;
  margin-left: 50px;
  position: relative;
  padding: 10px 46px 10px 40px;
}

@media only screen and (max-width: 767px) {
  .container {
    width: 100%;
    padding: 15px;
  }
  #myInput {
    width: 64%;
  }
  .btn-View {
    width: 10%;
  }
  table td {
    padding: 12px;
  }
}

＆＃13;

<div class="container">
  <div class="row">
    <input type="file" name="myInput" id="myInput">
  </div>
</div>

＆＃13;

Answer 1

你可以通过多种方式使它发挥作用。

如果您不需要使用文件名，那么这是一种简单的方法输入文件和标签是最快捷的方式。
- https://codepen.io/anupkumarmaharjan/pen/mWXbVj
使用javascript可以很方便。浏览这些链接以获得更好的理解。
- https://codepen.io/anupkumarmaharjan/pen/NpyKPm
- https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way

所有浏览器都不支持文件上传按钮

1 个答案: