# ✨ Transforming Glide Inputs with CSS

**URL:** <https://community.glideapps.com/t/transforming-glide-inputs-with-css/87011>\
**Category:** Community Resources\
**Tags:** custom-css\
**Created:** [May 5, 2026, 8:01am UTC](https://community.glideapps.com/t/transforming-glide-inputs-with-css/87011 "2026-05-05T08:01:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 5, 2026, 8:01am UTC](https://community.glideapps.com/t/transforming-glide-inputs-with-css/87011/1 "2026-05-05T08:01:01Z")

</div>

You can transform native Glide inputs into a **Compact Inline Underline Input System with Adaptive Labels** , making your forms more space-efficient, structured, and visually cleaner.  
This system is fully compatible with all Glide native input types, including text, number, email, phone, and validated inputs.

# 1. Adaptive Floating Standard

![Floating Standard](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/f/6f6f7e9a64f6c9f347fbd466d3a4c8045f2e0d98.gif)

> **📋 Copy CSS**
>
> ```css
> /* ==================== FIELD CONTAINER ==================== */
> #page-root [data-testid="wire-container"] {
> margin-bottom: 16px;
> }
> 
> /* ==================== INPUT BASE (exclude number) ==================== */
> #page-root [data-testid="wire-container"] :is(input:not([type="number"]), textarea) {
> border: none;
> border-bottom: 2px solid var(--gv-border-dark);
> border-radius: 0;
> background-color: transparent;
> padding: 0.5rem 0;
> }
> 
> /* ==================== HOVER ==================== */
> #page-root [data-testid="wire-container"] :is(input:not([type="number"]), textarea):hover {
> border-bottom: 2px solid var(--gv-border-dark);
> box-shadow: none;
> }
> 
> /* ==================== FOCUS ==================== */
> #page-root [data-testid="wire-container"] :is(input:not([type="number"]), textarea):focus {
> border-bottom-color: #3b82f6;
> }
> 
> /* ==================== REMOVE FOCUS GLOW ==================== */
> #page-root [data-testid="wire-container"] :is(input, textarea):is(:focus, :focus-visible) {
> outline: none;
> box-shadow: none;
> }
> 
> /* ==================== NUMBER ENTRY ==================== */
> #page-root [class^="wire-field___StyledLabel2"] {
> border: none;
> border-bottom: 2px solid var(--gv-border-dark);
> border-radius: 0;
> background-color: transparent;
> padding: 0;
> }
> 
> /* ==================== NUMBER HOVER ==================== */
> #page-root [class^="wire-field___StyledLabel2"]:hover {
> border-bottom: 2px solid var(--gv-border-dark);
> box-shadow: none;
> }
> 
> /* ==================== NUMBER FOCUS ==================== */
> #page-root [class^="wire-field___StyledLabel"]:has([data-testid="wf-input"][type="number"]:focus)
> [class^="wire-field___StyledLabel2"] {
> border-bottom-color: #3b82f6;
> }
> 
> /* ==================== LABEL BASE ==================== */
> #page-root label[class^="wire-field___StyledLabel"] [data-testid="wf-title"] {
> position: absolute;
> top: 12px;
> transform: translateY(-1.5rem) scale(0.75);
> transform-origin: left top;
> transition: all 0.2s ease;
> }
> 
> /* ==================== EMPTY STATE ==================== */
> #page-root label[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:placeholder-shown)
> [data-testid="wf-title"] {
> transform: translateY(0) scale(1);
> color: #9ca3af;
> }
> 
> /* ==================== FLOATING (FOCUS + FILLED) ==================== */
> #page-root label[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:focus)
> [data-testid="wf-title"],
> #page-root label[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:not(:placeholder-shown))
> [data-testid="wf-title"] {
> transform: translateY(-1.5rem) scale(0.75);
> color: #6b7280;
> }
> 
> /* ==================== FOCUS LABEL COLOR ==================== */
> #page-root label[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:focus)
> [data-testid="wf-title"] {
> color: #3b82f6;
> }
> 
> ```

* * *

# 2. Adaptive Floating Outlined

![Floating Outlined](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/a/caa29a919a940d9b2c6e644f8ae7bb3a8334f041.gif)

> **📋 Copy CSS**
>
> ```css
> /* ==================== INPUT BASE ==================== */
> #page-root [data-testid="wire-container"] :is(input:not([type="number"]), textarea) {
> background-color: transparent;
> border-width: 2px;
> }
> 
> /* ==================== FOCUS BORDER ==================== */
> #page-root [data-testid="wire-container"] :is(input:not([type="number"]), textarea):focus {
> border-color: #3b82f6;
> }
> 
> /* ==================== REMOVE FOCUS GLOW ==================== */
> #page-root [data-testid="wire-container"] :is(input, textarea):is(:focus, :focus-visible) {
> outline: none;
> box-shadow: none;
> }
> 
> /* ==================== LABEL BASE ==================== */
> #page-root label[class^="wire-field___StyledLabel"] [data-testid="wf-title"] {
> position: absolute;
> left: 12px;
> top: calc(50% + 2px);
> transform: translateY(-50%) scale(1);
> transform-origin: left center;
> transition: all 0.2s ease;
> font-weight: normal;
> z-index: 1;
> }
> 
> /* ==================== EMPTY STATE ==================== */
> #page-root label[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:placeholder-shown):not(:has([data-testid="wf-input"]:focus))
> [data-testid="wf-title"] {
> color: #9ca3af;
> background: transparent;
> }
> 
> /* ==================== FLOATING STATE ==================== */
> #page-root label[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:focus)
> [data-testid="wf-title"],
> #page-root label[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:not(:placeholder-shown))
> [data-testid="wf-title"] {
> top: 8px;
> transform: translateY(-50%) scale(0.75);
> color: #6b7280;
> background-color: var(--gv-bg-front); 
> /* alt: var(--gv-bg-container-base); */
> padding: 0 4px;
> }
> 
> /* ==================== FOCUS LABEL COLOR ==================== */
> #page-root label[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:focus)
> [data-testid="wf-title"] {
> color: #3b82f6;
> }
> 
> /* ==================== INPUT PADDING ==================== */
> #page-root label[class^="wire-field___StyledLabel"] input:not([type="number"]) {
> padding: 1rem 0.75rem;
> }
> 
> /* ==================== NUMBER ENTRY ==================== */
> #page-root [class^="wire-field___StyledLabel2"] {
> background-color: transparent;
> border-width: 2px;
> padding: 0.5rem 0.75rem;
> }
> 
> /* ==================== NUMBER FOCUS ==================== */
> #page-root label[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:focus)
> [class^="wire-field___StyledLabel2"] {
> border-color: #3b82f6;
> }
> 
> /* ==================== TEXTAREA ==================== */
> #page-root [class^="wire-field___StyledDiv16"] textarea,
> #page-root [class^="wire-field___StyledDiv18"] {
> padding: 1rem 0.75rem;
> }
> 
> ```

* * *

# 3. Inline Underline Input

 ![Inline Underline Input](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/3/f3bc55d9b0d4237ddad203ca7d5bd88721661f1a.png)

> **📋 Copy CSS**
>
> ```auto
> /* ==================== FIELD CONTAINER ==================== */
> #page-root [data-testid="wire-container"] [data-testid="wf-input"] {
> width: 100%;
> }
> 
> /* ==================== INPUT BASE (exclude number) ==================== */
> #page-root [data-testid="wire-container"] :is(input:not([type="number"]), textarea) {
> border: none;
> border-bottom: 2px solid var(--gv-border-dark);
> border-radius: 0;
> background-color: transparent;
> padding: 0.5rem 0;
> box-shadow: none;
> }
> 
> /* ==================== HOVER ==================== */
> #page-root [data-testid="wire-container"] :is(input:not([type="number"]), textarea):hover {
> box-shadow: none;
> }
> 
> /* ==================== FOCUS ==================== */
> #page-root [data-testid="wire-container"] :is(input:not([type="number"]), textarea):focus {
> border-bottom-color: #3b82f6;
> outline: none;
> box-shadow: none;
> }
> 
> /* ==================== LABEL ROW LAYOUT ==================== */
> #page-root label[class^="wire-field___StyledLabel"] {
> display: flex;
> flex-direction: row;
> align-items: flex-end;
> width: 100%;
> position: relative;
> }
> 
> /* ==================== LABEL TITLE ==================== */
> #page-root [data-testid="wf-title"] {
> width: 120px;
> padding-right: 12px;
> display: -webkit-box;
> -webkit-line-clamp: 2;
> -webkit-box-orient: vertical;
> overflow: hidden;
> text-overflow: ellipsis;
> white-space: normal;
> }
> 
> /* ==================== NUMBER INPUT CONTAINER ==================== */
> #page-root [class^="wire-field___StyledLabel2"] {
> border: none;
> border-bottom: 2px solid var(--gv-border-dark);
> border-radius: 0;
> background-color: transparent;
> padding: 0;
> box-shadow: none;
> }
> 
> /* ==================== NUMBER FOCUS ==================== */
> #page-root label[class^="wire-field___StyledLabel"]:has([data-testid="wf-input"]:focus)
> [class^="wire-field___StyledLabel2"] {
> border-bottom-color: #3b82f6;
> }
> 
> /* ==================== ERROR MESSAGE ==================== */
> #page-root [class^="wire-field___StyledDiv6"] {
> position: absolute;
> bottom: -20px;
> left: 120px;
> }
> 
> ```

* * *

## Required Field Indicator (⚠ Required when using required fields)

> **📋 Copy CSS**
>
> ```css
> /* Option 1: Hide "Required" text, show red asterisk instead */
> [data-testid="wf-required"] {
> display: none;
> }
> 
> /* Red asterisk next to label when field is required */
> [class^="wire-field___StyledDiv"]:has([data-testid="wf-required"]) [data-testid="wf-title"]::after {
> content: " *";
> color: #ef4444;
> }
> 
> /* Option 2: Keep "Required" text at top-right corner (uncomment below, comment Option 1) */
> /*
> [data-testid="wf-required"] {
> position: absolute;
> top: -12px;
> right: 12px;
> z-index: 2;
> margin-left: auto;
> }
> */
> 
> ```

---

<div class="post-metadata">

**Author:** ![MaximeBaker](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/maximebaker/32/80877_2.png) [@MaximeBaker](https://community.glideapps.com/u/MaximeBaker)\
**Post date:** [May 5, 2026, 9:44am UTC](https://community.glideapps.com/t/transforming-glide-inputs-with-css/87011/2 "2026-05-05T09:44:28Z")

</div>

Niiice

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [May 5, 2026, 11:55am UTC](https://community.glideapps.com/t/transforming-glide-inputs-with-css/87011/3 "2026-05-05T11:55:12Z")

</div>

#2 is slick! Nice way to save space in a form!

Overlapping behavior with “required” label though…and I’m not getting the outline?  
 ![CleanShot 2026-05-05 at 07.56.41](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/1/61e1b26833ba00cbc9df12435d20c53c5ed869ed.gif)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [May 5, 2026, 1:16pm UTC](https://community.glideapps.com/t/transforming-glide-inputs-with-css/87011/4 "2026-05-05T13:16:22Z")

</div>

You’re absolutely right — I completely missed the “required” case 😅 I’ve just updated the original post with a fix. Really appreciate you catching that and helping test it!