Pure CSSMIT licensed

URL with Protocol

URL input with a non-editable `https://` prefix that visually integrates with the field. Submit value is the full URL; users only type the host portion.

Published May 4, 2026

Live Demo

Try it

The code

<label class="if-25">
  <span class="if-25-label">Website</span>
  <span class="if-25-wrap">
    <span class="if-25-prefix">https://</span>
    <input
      type="text"
      name="url-host"
      inputmode="url"
      placeholder="codefronts.com"
      pattern="[a-zA-Z0-9.-]+\\\\.[a-zA-Z]{2,}.*"
    />
  </span>
</label>

<label class="if-25">
  <span class="if-25-label">Website</span>
  <span class="if-25-wrap">
    <span class="if-25-prefix">https://</span>
    <input
      type="text"
      name="url-host"
      inputmode="url"
      placeholder="codefronts.com"
      pattern="[a-zA-Z0-9.-]+\\\\.[a-zA-Z]{2,}.*"
    />
  </span>
</label>

.if-25 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-25-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-25-wrap {
  display: inline-flex;
  align-items: stretch;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.if-25-wrap:focus-within {
  border-color: #06b6d4;
}

.if-25-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(6, 182, 212, 0.08);
  color: #06b6d4;
  font: 600 12px/1 "JetBrains Mono", monospace;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.if-25 input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font: 500 14px/1 system-ui, sans-serif;
}

.if-25 input::placeholder {
  color: #b8b6d4;
}

.if-25 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-25-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-25-wrap {
  display: inline-flex;
  align-items: stretch;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.if-25-wrap:focus-within {
  border-color: #06b6d4;
}

.if-25-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(6, 182, 212, 0.08);
  color: #06b6d4;
  font: 600 12px/1 "JetBrains Mono", monospace;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.if-25 input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font: 500 14px/1 system-ui, sans-serif;
}

.if-25 input::placeholder {
  color: #b8b6d4;
}

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: URL with Protocol
Source: https://codefronts.com/components/css-input-fields/url-with-protocol/

URL input with a non-editable `https://` prefix that visually integrates with the field. Submit value is the full URL; users only type the host portion.
## HTML
```html
<label class="if-25">
  <span class="if-25-label">Website</span>
  <span class="if-25-wrap">
    <span class="if-25-prefix">https://</span>
    <input
      type="text"
      name="url-host"
      inputmode="url"
      placeholder="codefronts.com"
      pattern="[a-zA-Z0-9.-]+\\\\.[a-zA-Z]{2,}.*"
    />
  </span>
</label>
```
## CSS
```css
.if-25 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-25-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-25-wrap {
  display: inline-flex;
  align-items: stretch;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.if-25-wrap:focus-within {
  border-color: #06b6d4;
}

.if-25-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(6, 182, 212, 0.08);
  color: #06b6d4;
  font: 600 12px/1 "JetBrains Mono", monospace;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.if-25 input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font: 500 14px/1 system-ui, sans-serif;
}

.if-25 input::placeholder {
  color: #b8b6d4;
}
```

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: URL with Protocol
Source: https://codefronts.com/components/css-input-fields/url-with-protocol/

URL input with a non-editable `https://` prefix that visually integrates with the field. Submit value is the full URL; users only type the host portion.
## HTML
```html
<label class="if-25">
  <span class="if-25-label">Website</span>
  <span class="if-25-wrap">
    <span class="if-25-prefix">https://</span>
    <input
      type="text"
      name="url-host"
      inputmode="url"
      placeholder="codefronts.com"
      pattern="[a-zA-Z0-9.-]+\\\\.[a-zA-Z]{2,}.*"
    />
  </span>
</label>
```
## CSS
```css
.if-25 {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 320px;
}

.if-25-label {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #b8b6d4;
  text-transform: uppercase;
}

.if-25-wrap {
  display: inline-flex;
  align-items: stretch;
  background: #1a1a22;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.if-25-wrap:focus-within {
  border-color: #06b6d4;
}

.if-25-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  background: rgba(6, 182, 212, 0.08);
  color: #06b6d4;
  font: 600 12px/1 "JetBrains Mono", monospace;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.if-25 input {
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: 0;
  outline: none;
  background: transparent;
  color: #f0eeff;
  font: 500 14px/1 system-ui, sans-serif;
}

.if-25 input::placeholder {
  color: #b8b6d4;
}
```

How this works

A URL input with https:// prefix built as a flex row: a non-editable span renders the protocol badge, and the actual input takes the host portion. The wrapper handles the border and focus-within ring so the prefix and input read as one field.

inputmode="url" raises the URL keyboard on mobile (with .com key), and pattern catches most malformed hosts on submit. This is the portfolio / Linktree / creator-profile input pattern — users type codefronts.com and you concatenate https:// + value server-side. For strict validation, wrap the joined URL in new URL() inside a try/catch on submit.

Make it yours

Swap the prefix text to http://, ftp://, or a fixed subdomain like *.myapp.com/.
Retint the prefix background and text color to any accent-on-tint pairing via one variable.
Change type="text" to type="url" if you want native browser URL validation on submit.
Tighten the pattern regex to require a specific TLD list or reject IP addresses.

Gotchas — read before shipping

type="url" validation is lax by default — it accepts anything with a scheme; use a URL constructor for real checks.
The visual prefix is not part of the submit value — join https:// + input value in your handler before saving.
pattern only fires on form submit, not on blur — add a JS blur listener if you want inline feedback.

Browser support

Chrome	Safari	Firefox	Edge
5+	10+	4+	5+

Everything is universal; the prefix is a plain flex layout with no modern-only pseudos.