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

Question

I am trying to give a custom input field (file upload) rounded corners.

I am using the same CSS as on all my other input fields (text, number, password) on the same form where this works fine but am unable to apply to same to the field below.

I tried on the input field, on the spans and on the div as well as with a class and with inline CSS but nothing works here (on all other fields I just apply it on the input and it works fine).

Can someone tell me how to fix this ?

.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.

The HTML code you have shown contains none of those classes that you are trying to select in your CSS. — 04FS, Oct 07 '19 at 14:34
Possible duplicate of [Styling an input type="file" button](https://stackoverflow.com/questions/572768/styling-an-input-type-file-button) — disinfor, Oct 07 '19 at 14:34
@04FS: 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. — , Oct 07 '19 at 14:42
Without seeing the CSS for the whole page, it's hard to tell what's going on. There is probably a style declaration elsewhere that is overriding the button you are trying to make round. The lazy way to do this is to force the style with !important. The better way is to find out where the button style is already declared and override it. Use Inspect element in and look at cascading. — zombiedoctor, Oct 07 '19 at 15:04

score 0 · Answer 1 · answered Oct 07 '19 at 14:52

They are rounded, but you don't see them.

Maybe you use a background-color in your css to "see" how the elements have rounded corners.

First set

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

The label has all corners rounded.

The set:

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

The span inside has 2 on the right side.

score 0 · Answer 2 · answered Oct 07 '19 at 14:58

0

to apply CSS to input tag you will need to apply it directly to this input using

input[type=file]

or as in your case, you can add it to any of the classes you have at the CSS style file like this

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

hope this help

answered Oct 07 '19 at 14:58

Midz Elwekil

441
4
12

Thanks. This does not change anything as the input is behind the label which is on purpose here. – Oct 07 '19 at 15:08
the input class itself dose not have any of the classes you provided us with, applying rounded21 to the class will display the style – Midz Elwekil Oct 07 '19 at 15:12

Yvonne Aburrow · Accepted Answer · 2019-10-07T15:51:01.530

0

The easiest way to fix this is to hide the native UI (input type="file") and format the label as if it were a button.

.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>

edited Oct 07 '19 at 15:51

answered Oct 07 '19 at 14:58

Yvonne Aburrow

2,602
1
17
47

Thanks for this ! This works but then I don't have the part of the input anymore that shows the file name resp. my placeholder text. – Oct 07 '19 at 15:09
1

Once the file has uploaded, you can use JavaScript (Angular, jQuery, whatever) to insert the filename in a span after the label. I will add html code for the span. – Yvonne Aburrow Oct 07 '19 at 15:48
1

Thanks a lot. With the update it works perfect for me. Exactly what I was looking for. – Oct 07 '19 at 18:35

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

3 Answers3