Plugin Elementor: How to customize the form upload visually?

Most form plugins use a simple “Browse” button for file uploads, Elementor is no exception. The following code makes the whole thing a bit prettier.

add_action( 'wp_head', function (){
    ?>
    <style>
        .file-input {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: -1;
        }

        .elementor-widget-form .elementor-field-group > .file-input + label,
        .elementor-widget-form .elementor-field-subgroup .file-input + label {
            font-family: "IBM Plex Sans", Sans-serif;
      font-size: 0.9em !important;
      font-weight: 300;
            color: white;
      text-transform: uppercase;
            background-color: #37b5e7;
            display: inline-block;
            padding: 13px 25px 13px 25px !important;
            cursor: pointer;
      border: 1px solid #37b5e7;
      height: 40px;
      transition: all .3s;
        }

        .file-input:focus + label,
        .file-input + label:hover {
            background-color: #fff !important;
      color: #37b5e7 !important;
      transition: all .3s;
        }

    </style>
    <?php
});

add_filter( 'elementor_pro/forms/render/item/upload', function ( $item, $item_index, $form ) {
    $item['field_type'] = 'file';

    return $item;
}, 10, 3 );

add_action( 'elementor_pro/forms/render_field/file', function ( $item, $item_index, $form ) {

   $form->add_render_attribute( 'input' . $item_index, 'class', 'file-input elementor-upload-field' );
   $form->add_render_attribute( 'input' . $item_index, 'type', 'file', true );

   if ( ! empty( $item['allow_multiple_upload'] ) ) {
      $form->add_render_attribute( 'input' . $item_index, 'multiple', 'multiple' );
      $form->add_render_attribute( 'input' . $item_index, 'name', $form->get_attribute_name( $item ) . '[]', true );
   }

   if ( ! empty( $item['file_sizes'] ) ) {
      $form->add_render_attribute(
         'input' . $item_index,
         [
            'data-maxsize' => $item['file_sizes'],
            'data-maxsize-message' => __( 'This file exceeds the maximum allowed size.', 'elementor-pro' ),
         ]
      );
   }

   echo '<input ' . $form->get_render_attribute_string( 'input' . $item_index ) . '>';
   echo '<label for="' . $form->get_attribute_id( $item ) . '"><i class="fa fa-upload"></i>&nbsp; Datei hochladen</label>';

}, 10, 3 );