CSS: невозможно применить закругленные углы к пользовательскому полю ввода (работает с другими полями)

Question

Я пытаюсь дать пользовательское поле ввода (загрузка файла) закругленные углы .

Я использую тот же 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

чтобы применить CSS к тегу ввода, вам нужно будет применить его непосредственно к этому вводу, используя

input[type=file]

или, как в вашем случае, вы можете добавить его к любому из классов, которые у вас есть в стиле CSSфайл вроде этого

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

надеюсь, что это поможет

Answer 2

Самый простой способ исправить это - скрыть собственный пользовательский интерфейс (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>

Answer 3

Они округлены, но вы их не видите.

Возможно, вы используете цвет фона в CSS, чтобы "увидеть", как элементы имеют закругленные углы.

Первый набор

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

Этикетка имеет все углы, закругленные.

Набор:

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

Пролет внутри имеет 2 с правой стороны.