一个选择文件用的表单元素也是一个 input .. 它的 type，也就是类型是 file .. 在 Bootstrap 里面， 我们在文件表单元素上得再添加一个 form-control-file .. 这个类并不会改变太多文件元素的外观 .. 它只是把 元素的 display 设置成了 block ..

自定义样式

Bootstrap 为文件元素提供了一种自定义的样式，可以彻底改变文件元素的样式 ..

先在文件元素的上面，添加一个 custom-file-input 这个类 .. 这个类里面的样式会让文件元素变成完全透明的 ..

它的下面再添加一个额外的标签 .. 一组 span ，上面加上 custom-file-control ，用户在界面上看到的文件选择元素其实是这个 span 元素的样式 ..

再用一组 label 标签去包装一下整个文件选择元素 .. 标签上面添加一个 custom-file ... 点击标签会让浏览器打开选择文件的窗口 ..

现在你看到的就是一个自定义的文件选择元素 .. 我这里界面上显示的是文字是英文的 .. 因为我的这个 html 文件的语言是 en .. 这里我们可以把它换成 zh-Hans .. 这个字符表示的是简体中文 ..

然后我们再用 lang 这个伪元素去设置一下语言 .. 打开自定义的样式 .. 设置一下 custom-file-control 下面的 lang 这个伪元素，在括号里设置一下语言 .. 这里就是 zh-Hans .. 选择按钮是在 ::before 这个伪元素 .. 添加一个 content 属性 .. 对应的值就是按钮上显示的文字 .. 选择

复制一份 .. 再去设置一下 after 这个伪元素里的简体中文内容 .. 选择文件...

现在界面上显示的这个文件元素上的文字就会变成中文的了 ..

点一下它 .. 会打开浏览文件的窗口 ...