如何将input type file这个控件美化一下

1. 要实现的变化如下：

 

2. 关键点：

 3.代码如下：

@{
    ViewBag.Title = "InputType";

}
<script src="~/Scripts/jquery-3.4.1.js"></script>

<h2>HTML/Element/input/file</h2>

<h3>1. 原来不加样式的：</h3>

<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" />
<h3>2. 加样式后</h3>

<div class="form-group">
    <input type="file" id="dataFile" name="upload" class="input-ghost" style='visibility:hidden; height:0'>
    <div class="input-group input-file">
        <span class="input-group-btn">
            <button class="btn btn-default btn-choose" type="button">Choose</button>
        </span>
        <input type="text" class="form-control" placeholder="Choose a file..." style="cursor: pointer;">

    </div>
</div>