28 CSS Input Fields05 / 28

Pure CSSMIT licensed

Notched Outline

Material-style notched outline. The label sits inside a gap cut into the border. Subtle, professional, and works beautifully for forms with dense fields.

Published

Live Demo
Try it

The code

<label class="if-05">
  <span class="if-05-label">Full name</span>
  <input type="text" name="name" autocomplete="name" placeholder=" " required />
  <span class="if-05-frame" aria-hidden="true">
    <span class="if-05-l"></span>
    <span class="if-05-cut"><span>Full name</span></span>
    <span class="if-05-r"></span>
  </span>
</label>
.if-05 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
}

.if-05 input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.if-05 input::placeholder {
  color: transparent;
}

.if-05-label {
  position: absolute;
  left: 14px;
  top: 13px;
  font-size: 13px;
  color: #b8b6d4;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 2;
}

.if-05 input:focus ~ .if-05-label,
.if-05 input:not(:placeholder-shown) ~ .if-05-label {
  opacity: 0;
}

.if-05-frame {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 12px auto 1fr;
  pointer-events: none;
}

.if-05-l,
.if-05-cut,
.if-05-r {
  border: 1px solid rgba(46, 184, 138, 0.35);
  transition: border-color 0.2s;
}

.if-05-l {
  border-right: 0;
  border-radius: 8px 0 0 8px;
}

.if-05-r {
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.if-05-cut {
  border-left: 0;
  border-right: 0;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 6px;
}

.if-05-cut > span {
  font-size: 10px;
  color: rgba(46, 184, 138, 0.85);
  font-weight: 600;
  background: #07070f;
  padding: 0 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateY(-13px) scale(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.if-05 input:focus ~ .if-05-frame .if-05-cut > span,
.if-05 input:not(:placeholder-shown) ~ .if-05-frame .if-05-cut > span {
  transform: translateY(-13px) scale(1);
}

.if-05:focus-within .if-05-l,
.if-05:focus-within .if-05-cut,
.if-05:focus-within .if-05-r {
  border-color: #2eb88a;
}
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Input Field from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Notched Outline
Source: https://codefronts.com/components/css-input-fields/notched-outline/

Material-style notched outline. The label sits inside a gap cut into the border. Subtle, professional, and works beautifully for forms with dense fields.
## HTML
```html
<label class="if-05">
  <span class="if-05-label">Full name</span>
  <input type="text" name="name" autocomplete="name" placeholder=" " required />
  <span class="if-05-frame" aria-hidden="true">
    <span class="if-05-l"></span>
    <span class="if-05-cut"><span>Full name</span></span>
    <span class="if-05-r"></span>
  </span>
</label>
```
## CSS
```css
.if-05 {
  position: relative;
  display: block;
  width: 100%;
  max-width: 280px;
}

.if-05 input {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 14px;
  background: transparent;
  border: 0;
  outline: none;
  color: #f0eeff;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.if-05 input::placeholder {
  color: transparent;
}

.if-05-label {
  position: absolute;
  left: 14px;
  top: 13px;
  font-size: 13px;
  color: #b8b6d4;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 2;
}

.if-05 input:focus ~ .if-05-label,
.if-05 input:not(:placeholder-shown) ~ .if-05-label {
  opacity: 0;
}

.if-05-frame {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 12px auto 1fr;
  pointer-events: none;
}

.if-05-l,
.if-05-cut,
.if-05-r {
  border: 1px solid rgba(46, 184, 138, 0.35);
  transition: border-color 0.2s;
}

.if-05-l {
  border-right: 0;
  border-radius: 8px 0 0 8px;
}

.if-05-r {
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.if-05-cut {
  border-left: 0;
  border-right: 0;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 6px;
}

.if-05-cut > span {
  font-size: 10px;
  color: rgba(46, 184, 138, 0.85);
  font-weight: 600;
  background: #07070f;
  padding: 0 4px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: translateY(-13px) scale(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}

.if-05 input:focus ~ .if-05-frame .if-05-cut > span,
.if-05 input:not(:placeholder-shown) ~ .if-05-frame .if-05-cut > span {
  transform: translateY(-13px) scale(1);
}

.if-05:focus-within .if-05-l,
.if-05:focus-within .if-05-cut,
.if-05:focus-within .if-05-r {
  border-color: #2eb88a;
}
```

How this works

The Material Design notched-outline input, rebuilt as pure CSS with no JavaScript or web-component runtime. The border is composed of three side-by-side spans inside a grid-template-columns: 12px auto 1fr frame — a fixed left corner, a middle cut sized to the label, and a right segment that fills the remainder. The middle cut has its horizontal borders removed, producing the characteristic gap.

The label lives inside the cut and scales from scale(0) to scale(1) on focus or when the field holds a value, checked via :focus and :not(:placeholder-shown) on the input plus the general sibling combinator (~). The label's own opaque background paints over the gap so it reads as sitting inside the border rather than on top of it. This is a copy-paste pure-CSS alternative to Material Web Components' outlined-text-field.

Make it yours

  • Swap the accent by changing both #2eb88a occurrences (focus border and label colour) and the resting rgba(46, 184, 138, 0.35).
  • Match the label's opaque background (#07070f) to your form surface — mismatch here is the number-one giveaway that the notch is faked.
  • Widen the left corner by editing the 12px track in grid-template-columns and the matching border-radius: 8px pair.
  • Speed the label snap by tuning transition: transform 0.2s ease; a shorter duration reads as more responsive on dense forms.

Gotchas — read before shipping

  • The label appears twice in markup — once as the resting .if-05-label, once inside the notch cut. Editing one copy without the other desyncs the two states.
  • The label's background colour must match the parent surface exactly; on gradient or image backgrounds the notch will look wrong because a solid fill can't blend in.
  • The placeholder=" " single space is required for :placeholder-shown to flip correctly — dropping it leaves the label permanently lifted.

Browser support

ChromeSafariFirefoxEdge
90+14+88+90+

CSS Grid, :placeholder-shown, and the general sibling combinator are universally supported; no polyfill required.

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →