问如何使用bootstrap 3.3.7或css设置自定义格式的文件输入

EN

<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>

<div class="custom-file">
    <input type=file name="file" id="file" class="custom-file-input">
    <label class="custom-file-label" for="file">Choose Images</label>
</div>

.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>