html - CSS:无法将圆 Angular 应用于自定义输入字段(在其他字段上工作)

Question

我正在尝试提供自定义输入字段(文件上传)圆 Angular 。

我在同一个表单上使用与我所有其他输入字段(文本、数字、密码)相同的 CSS，但我无法将其应用于下面的字段。

我在输入字段、跨度和 div 以及类和内联 CSS 上进行了尝试，但这里没有任何效果(在所有其他字段上，我只是将它应用于输入，并且效果很好)。

谁能告诉我如何解决这个问题？

.rounded2l {
  border-radius: 25px 0px 0px 25px;
}

.rounded2r {
  border-radius: 0px 25px 25px 0px;
}

.rounded4 {
  border-radius: 25px;
}

<div class="form-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input cursor-pointer" id="attachment" name="attachment"/>
    <label for="attachment" class="custom-file-label cursor-pointer rounded4">
      <span class="rounded2r">Attachment</span>
    </label>
  </div>
</div>	

**Update:**  
Added the CSS classes the way I was closest to what I need.  
This gives me rounded corners on the left but not on the right side of the field. 

Answer 1

解决此问题的最简单方法是隐藏 native UI (input type="file") 并将标签格式化为按钮。

.rounded2l {
  border-radius: 25px 0px 0px 25px;
}

.rounded2r {
  border-radius: 0px 25px 25px 0px;
}

.rounded4 {
  border-radius: 25px;
}

input[type=file] {
  display: none;
  }
  
  .file-upload {
  margin: 1rem;
  border-radius: 25px;
  background-color: #006600;
  color: #fff;
  padding: 0.5rem;
  cursor: pointer;
  }

<div class="form-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input cursor-pointer" id="attachment" name="attachment"/>
    <label for="attachment" class="file-upload" class="custom-file-label cursor-pointer rounded4">
      <span class="rounded2r">Upload Attachment</span>
      <span id="filename"></span>
      <!-- insert filename using javaScript when file has uploaded -->
    </label>
  </div>
</div>