css - 如何样式化/自定义输入类型文件元素？

Question

我正在使用带有 Bootstrap 的 MVC 5。如何设计输入类型文件元素，如下图所示。

.file-uploader .input-group input, .file-uploader .input-group-btn .button {
  height: 35px;
}
.file-uploader .input-group .input-group-addon {
    padding: 2px 15px;
    font-size: 15px;
    font-weight: normal;
    line-height: 1;
    color: #337ab7;
    text-align: center;
    background-color: #fff;
    border: 1px solid #d6d9e2;
    border-radius: 0;
}

<div class="form-group">
                                                        <label for="exampleInputEmail1">Logo image</label>
                                                        <div class="form-group file-uploader">
                                                            <input type="file" name="img[]" class="file">
                                                            <div class="input-group col-xs-12">
                                                                <span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
                                                                <input type="text" class="form-control input-lg" disabled placeholder="Upload Image">
                                                                <span class="input-group-btn">
                                                                    <button class="browse btn btn-primary" type="button"><i class="glyphicon glyphicon-search"></i>Browse</button> 
                                                                </span>
                                                            </div>
                                                        </div>
                                                    </div>

请帮帮我...

Answer 1

.file-uploader .input-group input,
.file-uploader .input-group-btn .button {
  height: 35px;
}
.file-uploader .input-group .input-group-addon {
  padding: 2px 15px;
  font-size: 15px;
  font-weight: normal;
  line-height: 1;
  color: #337ab7;
  text-align: center;
  background-color: #fff;
  border: 1px solid #d6d9e2;
  border-radius: 0;
}
.file
{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width:100%;
  height:100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div class="form-group">
  <label for="exampleInputEmail1">IMG</label>
  <div class="form-group file-uploader">
    
    <div class="input-group col-xs-12">
      <span class="input-group-addon"><i class="glyphicon glyphicon-picture"></i></span>
      <input type="text" class="form-control input-lg" disabled placeholder="Upload Image">
      <span class="input-group-btn">
                                                                    <div class="browse btn btn-primary"><i class="glyphicon glyphicon-search"></i> Browse<input type="file" name="img[]" class="file"></div> 
                                                                </span>
    </div>
  </div>
</div>