更改上传的输入样式

Question

我正在尝试设计一个看起来像这样的上传表单

这是我到目前为止所拥有的，但是我无法做到我想要的方式

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Upload">Upload Your CV here</label>
</div>

这是我到目前为止所拥有的东西： https://jsfiddle.net/kunz/6sr9wfxn/

Answer 1

您需要更改字体以获得该字体，但是我认为这应该可以使您朝正确的方向前进

  .custom-file-label[data-browse]::after {
      border-radius: 25px;
      background-color: orange;
      color: white;
      width: 8em;
  }

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<h3>
Careers
</h3>
<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label text-center" for="customFileLangHTML" data-browse="Upload">Upload Your CV here</label>
</div>