如何使用引导程序3.3.7或css

Question

我在这里实现文件上传的功能，但是当进入UI部分时，默认文件上传就像

<input type="file" name="data"> 

就像 默认文件浏览：

我想要这样的事情

所需文件浏览：

在这里，如果需要，我不想应用任何j查询或Java脚本，只是html，css，bootstrap吗？

Answer 1

仅适用于引导程序

B4

Answer 2

.input-group {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  width: 100%;
}

.input-group>.form-control,
.input-group>.custom-select,
.input-group>.custom-file {
  position: relative;
  flex: 1 1 auto;
  margin-bottom: 0;
}

.btn-file {
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}

.fileinput.input-group {
  display: flex;
  margin-bottom: 9px;
  flex-wrap: nowrap;
}

.fileinput.input-group>* {
  position: relative;
  z-index: 2;
}

.fileinput .form-control {
  padding: .375rem .75rem;
  display: inline-block;
  margin-bottom: 0px;
  vertical-align: middle;
  cursor: text;
}

.fileinput-filename {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}

.form-control .fileinput-filename {
  vertical-align: bottom;
}

.input-group>.form-control:not(:last-child),
.input-group>.custom-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.fileinput.input-group>.btn-file {
  z-index: 1;
}

.fileinput-new {
  padding-right: 10px;
}

.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
  border-radius: 0 4px 4px 0;
}

.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
  border-radius: 0 .25rem .25rem 0;
}

.input-group-addon:not(:first-child) {
  border-left: 0;
}

.fileinput .input-group-addon {
  padding: .375rem .75rem;
  width: auto;
}

.fileinput-exists .fileinput-new,
.fileinput-new .fileinput-exists {
  display: none;
}

.fileinput .btn {
  vertical-align: middle;
}

.fileinput .input-group-addon {
  padding: .375rem .75rem;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.fileinput.input-group>.btn-file {
  z-index: 1;
}

.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
  border-radius: 0 4px 4px 0;
}

.fileinput-new.input-group .btn-file,
.fileinput-new .input-group .btn-file {
  border-radius: 0 .25rem .25rem 0;
}

.btn-file>input {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 23px;
  cursor: pointer;
  filter: alpha(opacity=0);
  opacity: 0;
  direction: ltr;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="margin-top:50px;">
  <div class="form-group row">
    <label class="control-label col-md-4 text-md-right" for="fileupload1">
                                        File input widget
                                    </label>
    <div class="col-md-8">
      <div class="fileinput fileinput-new input-group " data-provides="fileinput">
        <div class="form-control" data-trigger="fileinput">
          <i class="glyphicon glyphicon-file fileinput-exists"></i>
          <span class="fileinput-filename"></span>
        </div>
        <button class="input-group-addon btn btn-default btn-file">
                                            <span class="fileinput-new">Select file</span>
                                            <span class="fileinput-exists">Change</span>
                                            <input id="fileupload1" type="file">
                                        </button>
        <a href="#" class="input-group-addon btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a>
      </div>
    </div>
  </div>
</div>

Answer 3

仅CSS和Bootstrap类

<div class="col-md-4 input-group">
    <input class=" form-control" type="text"/>
    <div class="input-group-btn">
        <label for="files" class="btn btn-default">browse</label>
        <input id="files" type="file" class="btn btn-default"  style="visibility:hidden;"/>
    </div>
</div>