DEV Community

Styling file inputs like a boss

Abdulqudus Abubakre on August 21, 2020

HTML elements have default styles applied to them by individual browsers. These styles could vary depending on the browser, and applying your own c...
Read full post
Collapse
 
louislow profile image
Louis Low •

This also can be replicated by using the Yogurt Framework.

Method #1: ...with inline styling in .html.

<y class="relative">
  <y class="absolute">
    <input class="opacity-0"
           type="file" 
           id="file">
    <label class="flex justify-center items-center w-48 h-12 text-white font-semibold bg-gradient start-pink-500 start-10 stop-indigo-500 stop-90 angle-45 transition duration-300 ease-in-out transform hover:-translate-y-1 rounded-full shadow cursor-pointer"
           for="file">
      Select file
    </label>
  </y>
</y>
Enter fullscreen mode Exit fullscreen mode

Method #2: ... with a separate .scss file styling.

<!-- index.html -->
<y class="file-input">
  <input type="file" 
         id="file">
  <label for="file">
    Select file
  </label>
</y>
Enter fullscreen mode Exit fullscreen mode 
// @file: style.scss
.file-input {
  @extend
    // layout
    .relative;

  input {
    @extend
      // layout
      .absolute,
      // effects
      .opacity;
  }

  label {
    @extend
      // flex
      .flex, .justify-center, .items-center,
      // spacing
      .w-48, .h-12, 
      // typography
      .text-white, .font-semibold,
      // backgrounds
      .bg-gradient, .start-pink-500, .start-10, .stop-indigo-500, .stop-90, .angle-45,
      // transistions
      .transition, .duration-300, .ease-in-out,
      // transforms
      .transform .hover\:-translate-y-1,
      // borders
      .rounded-full, 
      // effects
      .shadow, 
      // interactivity
      .cursor-pointer;
  }
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
shmshd profile image
Shamshid •

Your framework looks like a mini TailwindCSS.

Collapse
 
jonascrft profile image
jonas.C •

Tailwind lovers see tailwind everywhere. ^^

Collapse
 
vikasjk profile image
Vikas-jk • • Edited

You can also simply use bootstrap (with Javascript to upload file)

      <div class="col-lg-6 col-sm-6 col-12">

        <div class="input-group">
            <label class="input-group-btn">
                <span class="btn btn-primary">
                    Browse&hellip; <input type="file" style="display: none;" id="file" multiple>
                </span>
            </label>
            <input type="text" class="form-control" id="inputBox" readonly>
        </div>

    </div>
Enter fullscreen mode Exit fullscreen mode

Source: Styling Input type="file" button using CSS & Bootstrap

Collapse
 
tundeondotnet profile image
Akeem Aweda •

Good job bro!

Collapse
 
pavelloz profile image
Paweł Kowalski •

For those who need more features and some integrations: uppy.io :-)