✨ Transforming Glide Inputs with CSS

Himaladin · May 5, 2026, 8:01am

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

📋 Copy 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

📋 Copy 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

📋 Copy CSS

/* ==================== 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

/* 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;
}
*/

MaximeBaker · May 5, 2026, 9:44am

Niiice

Robert_Petitto · May 5, 2026, 11:55am

#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

Himaladin · May 5, 2026, 1:16pm

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!

Topic		Replies	Views
Exploring the Enhanced Capabilities of Glide's Native Form Community Resources	45	1502	August 1, 2025
Full Address Form Community Resources ai , form	7	107	May 1, 2025
Spaces between number entry boxes inside a container Ask for Help	1	43	May 4, 2026
Change inputs from vertical to horizontal Ask for Help	6	104	January 5, 2026
Text/Phone/etc fields background is now transparent everywhere Ask for Help	7	197	March 1, 2024

✨ Transforming Glide Inputs with CSS

1. Adaptive Floating Standard

2. Adaptive Floating Outlined

3. Inline Underline Input

Required Field Indicator ( Required when using required fields)

Related topics