CSS: 无法将圆角应用于自定义输入字段（正在处理其他字段）

Question

我正在尝试提供自定义输入字段（文件上传）圆角。

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

我尝试了输入字段、跨度和 div 以及 class 和内联 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

它们是圆形的，但你看不到它们。

也许您在 css 中使用背景色 "see" 元素如何圆角。

第一组

.rounded4 {
  border-radius: 25px;
  background-color: lime;
}

标签的所有角都是圆的。

集合：

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

里面的span右边有2个

Answer 2

要将 CSS 应用于输入标签，您需要使用

将其直接应用于此输入

input[type=file]

或者根据您的情况，您可以将它添加到 CSS 样式文件中的任何类中，像这样

.rounded2l,
input[type=file]{
  border-radius: 25px 0px 0px 25px;
  border: 1px solid #000;
}

希望对您有所帮助

Answer 3

解决此问题的最简单方法是隐藏本机 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>

CSS: 无法将圆角应用于自定义输入字段（正在处理其他字段）

CSS: Unable to apply rounded corners to custom input field (working on other fields)

html

css

rounded-corners

twitter-bootstrap