twbs / twbs/bootstrap

Floating Labels for File Input

Open
#39,867 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css feature
Dominant language
MDX
Stars
175k
Forks
78.6k
Avg merge
7h 19m
Merged PRs (30d)
35

Description

Prerequisites
Proposal

It would be a nice feature to have floating labels also for file inputs. At the moment, the label is placed over the button of the input field and overlaps parts of the button.
Screenshot_20240404_175422

Motivation and context

With having floating labels also for file inputs, (nearly) all input fields of a web form could be labeled with this, which enables a consistent layout.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating Bootstrap’s existing floating-label styles and the file-input markup and styling. Reproduce the reported overlap, then compare the result with other floating-label controls. Done means file inputs support a consistent floating-label layout without the label covering the button.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, html, scss
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.