0

I am trying to style the input "file" on my web page, but I keep having some problems with the button of this input. The result that is showing is as below:

enter image description here

The result that I want to achieve is as the submit button below the Choose File button. The problem is that I cannot style the button as the "Choose File", and when I try to change the color of the input file, it changes the background and not the button itself. The code that I am using for the Choose File button is:

input[type=file] {
        border-radius: 4px;
        border-color: $blue;
        background-color: $blue;
        border-width: 1px;
        width: 100%;
        -webkit-file-upload-button: hidden;
        height: $base-spacing*2;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        align-content: center;
        text-align: center;
        cursor: pointer;
        line-height: 1.6rem;
        font-size: 1.1rem;
    }

The code of the HTML is:

   <div>
            <label for="Image" class="col-md-4 col-form-label text-md-right">
                {{ __('Upload Image') }}:
            </label>
            <br />
            <input id="Image" type="file" class="form-control-image{{ $errors->has('Image') ? ' is-invalid' : '' }}"
                name="image_reference">
            @if ($errors->has('image_reference'))
            <span class="invalid-feedback" role="alert">
                <strong>{{ $errors->first('image_reference') }}</strong>
            </span>
            @endif
        </div>

Can anyone help me figure out how can I fix the styling of the button Choose File?

Thank you all.

GerRax
  • 59
  • 1
  • 8

2 Answers2

2

We cannot do much customization of the file input. But you have options like below.

Note: I have used Bootstrap for some classes as your code is using it. But if you want you can have custom classes as well.

One disadvantage is that the select file information is also hidden. If you want that you can get that using JavaScript and show below the button.

input[type='file'] {
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<label>
  <input id="Image" type="file" class="form-control-image"         name="image_reference">
  <span class="btn btn-primary">File button</span>
</label>
<br />
<br />
<button class="btn btn-primary form-control-image">Submit</button>
kiranvj
  • 32,342
  • 7
  • 71
  • 76
0

There's a selector for this now ::file-selector-button

Found the answer here: Styling an input type="file" button

input[type=file]::file-selector-button {
    align-content: center;
    align-items: center;
    border-radius: 4px;
    border-color: $blue;
    background-color: $blue;
    border-width: 1px;
    cursor: pointer;
    display: inline-flex;
    font-size: 1.1rem;
    height: $base-spacing*2;
    line-height: 1.6rem;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}
Carpal Tunnel
  • 1