How to set file input in custom format using bootstrap 3.3.7 or css

Question

Here I am implementing the functionality of file upload but when coming to the UI part the default file upload element, e.g.

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

gets rendered like:

while I want something like this:

If possible, I don't want to apply any jQuery or custom Javascript - just HTML, CSS, Bootstrap.

brooksrelyt · Accepted Answer · 2019-02-26 14:03:40Z

4

Only CSS & Bootstrap class

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

edited Feb 26, 2019 at 14:03

brooksrelyt

4,0536 gold badges37 silver badges58 bronze badges

answered Aug 8, 2018 at 8:19

mahmood kabi

3111 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

hello_earth Over a year ago

an explanation about using input groups in Bootstrap 3.3.7 here - as for the LABEL element with a "btn" class, having its "for" attribute defined, pointing to the invisible file input, ... all this seems like a clever hack, and (miracle!) it really works, at least on Chrome Version 92

Charu Maheshwari · Accepted Answer · 2018-08-08 05:39:34Z

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

Parth Shah · Accepted Answer · 2018-08-08 05:11:12Z

-1

For bootstrap only

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

answered Aug 8, 2018 at 5:11

Parth Shah

4117 silver badges14 bronze badges

1 Comment

hello_earth Over a year ago

it seems that custom-file (as part of custom form controls) was introduced only in Bootstrap 4 and doesn't work with Bootstrap 3.3.7

Collectives™ on Stack Overflow

How to set file input in custom format using bootstrap 3.3.7 or css

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related