Modern Pure CSS Form Controls

A comprehensive suite of pure CSS styles for a complete, ultra-modern, and minimalist look across all standard HTML form controls. Includes custom styled text inputs, select, textarea, checkboxes, radio buttons, file input, date/time/color pickers, and buttons. Achieve a cohesive, professional UI without JavaScript.

#css

#form controls

#html forms

#input styling

#modern design

#minimalist ui

#pure css

#frontend

#web design

#select

#textarea

#buttons

#file input

#date picker styling

#custom checkbox

#custom radio

/HTML *CSS ()JS Output Live Updates

:root {
  --umfc-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --umfc-text-color: #1f2937;
  --umfc-bg-color: #ffffff;
  --umfc-border-color: #d1d5db;
  --umfc-border-focus-color: #2563eb;
  --umfc-placeholder-color: #9ca3af;
  --umfc-disabled-bg: #f3f4f6;
  --umfc-disabled-text: #9ca3af;
  --umfc-disabled-border: #e5e7eb;
  --umfc-input-padding-y: 0.6rem;
  --umfc-input-padding-x: 0.8rem;
  --umfc-border-radius: 0.375rem;
  --umfc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --umfc-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --umfc-shadow-focus: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
  --umfc-primary-color: #2563eb;
  --umfc-primary-hover-color: #1d4ed8;
  --umfc-secondary-color: #4b5563;
  --umfc-secondary-hover-color: #374151;
}

html, body {
  background-color: #f9fafb;
}

.umfc-showcase-container.umfc-v2 {
  font-family: var(--umfc-font-family);
  background-color: #f9fafb;
  color: var(--umfc-text-color);
  padding: 20px;
  max-width: 850px;
  margin: 20px auto;
  border-radius: 10px;
}

.umfc-v2 .umfc-main-title {
  font-size: 2em; color: #111827; text-align: center; margin-bottom: 30px;
}
.umfc-v2 .umfc-fieldset {
  border: none;
  padding: 0;
  margin-bottom: 30px;
}
.umfc-v2 .umfc-legend {
  font-size: 1.2em; font-weight: 600; color: #374151;
  padding: 0; margin-bottom: 15px;
}
.umfc-v2 .umfc-input-group {
  margin-bottom: 1rem;
}
.umfc-v2 .umfc-label {
  display: block; font-size: 0.875rem;
  color: #4b5563;
  margin-bottom: 0.375rem;
  font-weight: 500;
}

.umfc-v2 .umfc-input,
.umfc-v2 .umfc-textarea,
.umfc-v2 .umfc-select {
  display: block; width: 100%;
  padding: var(--umfc-input-padding-y) var(--umfc-input-padding-x);
  font-size: 0.95rem; font-weight: 400; line-height: 1.5;
  color: var(--umfc-text-color);
  background-color: var(--umfc-bg-color);
  background-clip: padding-box;
  border: 1px solid var(--umfc-border-color);
  border-radius: var(--umfc-border-radius);
  box-shadow: var(--umfc-shadow-sm);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  box-sizing: border-box;
}

.umfc-v2 .umfc-input::placeholder, .umfc-v2 .umfc-textarea::placeholder {
  color: var(--umfc-placeholder-color); opacity: 1;
}

.umfc-v2 .umfc-input:focus, .umfc-v2 .umfc-textarea:focus, .umfc-v2 .umfc-select:focus {
  border-color: var(--umfc-border-focus-color);
  outline: 0;
  box-shadow: var(--umfc-shadow-focus), var(--umfc-shadow-sm);
}

.umfc-v2 .umfc-input:disabled, .umfc-v2 .umfc-textarea:disabled, .umfc-v2 .umfc-select:disabled,
.umfc-v2 .umfc-select-wrapper.umfc-disabled {
  background-color: var(--umfc-disabled-bg); color: var(--umfc-disabled-text);
  border-color: var(--umfc-disabled-border); opacity: 0.7; cursor: not-allowed; box-shadow: none;
}

.umfc-v2 .umfc-input[type="number"] { -moz-appearance: textfield; }
.umfc-v2 .umfc-input[type="number"]::-webkit-outer-spin-button,
.umfc-v2 .umfc-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}

.umfc-v2 .umfc-textarea { resize: vertical; min-height: 90px; }

/* Select specific styling */
.umfc-v2 .umfc-select-wrapper { position: relative; display: inline-block; width: 100%; }
.umfc-v2 .umfc-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 2.5rem; }
.umfc-v2 .umfc-select-wrapper::after {
  content: ''; position: absolute; top: 50%; right: 0.9rem;
  width: 0.4em; height: 0.4em; border-style: solid; 
  border-width: 0 0.12em 0.12em 0;
  border-color: var(--umfc-placeholder-color);
  transform: translateY(-60%) rotate(45deg);
  pointer-events: none; transition: border-color 0.15s ease-in-out;
}
.umfc-v2 .umfc-select-wrapper:hover::after { border-color: #4b5563; }
.umfc-v2 .umfc-select-wrapper.umfc-disabled::after { border-color: var(--umfc-disabled-text); }

/* Custom Checkbox */
.umfc-v2 .umfc-checkbox-control {
  position: relative; display: flex; align-items: center;
  padding-left: 28px;
  margin-bottom: 0.5rem; cursor: pointer; font-size: 0.95rem; user-select: none;
}
.umfc-v2 .umfc-checkbox-control input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.umfc-v2 .umfc-checkbox-indicator {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 20px; width: 20px; background-color: var(--umfc-bg-color);
  border: 1px solid var(--umfc-border-color); border-radius: var(--umfc-border-radius);
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  box-shadow: var(--umfc-shadow-sm);
}
.umfc-v2 .umfc-checkbox-control:hover input ~ .umfc-checkbox-indicator {
  border-color: #adb5bd;
}
.umfc-v2 .umfc-checkbox-control input:checked ~ .umfc-checkbox-indicator {
  background-color: var(--umfc-primary-color);
  border-color: var(--umfc-primary-color);
}
.umfc-v2 .umfc-checkbox-indicator::after {
  content: ""; position: absolute; display: none;
  left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid white; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.umfc-v2 .umfc-checkbox-control input:checked ~ .umfc-checkbox-indicator::after { display: block; }
.umfc-v2 .umfc-checkbox-control input:focus-visible ~ .umfc-checkbox-indicator {
  box-shadow: var(--umfc-shadow-focus), var(--umfc-shadow-sm);
  border-color: var(--umfc-border-focus-color);
}
.umfc-v2 .umfc-checkbox-control.umfc-disabled {
  color: var(--umfc-disabled-text); cursor: not-allowed;
}
.umfc-v2 .umfc-checkbox-control.umfc-disabled input ~ .umfc-checkbox-indicator {
  background-color: var(--umfc-disabled-bg); border-color: var(--umfc-disabled-border); opacity: 0.7;
}
.umfc-v2 .umfc-checkbox-control.umfc-disabled input:checked ~ .umfc-checkbox-indicator {
  background-color: #a0aec0; border-color: #a0aec0;
}

/* Custom Radio Button */
.umfc-v2 .umfc-radio-control {
  position: relative; display: flex; align-items: center;
  padding-left: 28px; margin-bottom: 0.5rem; cursor: pointer; font-size: 0.95rem; user-select: none;
}
.umfc-v2 .umfc-radio-control input[type="radio"] { position: absolute; opacity: 0; cursor: pointer; }
.umfc-v2 .umfc-radio-indicator {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  height: 20px; width: 20px; background-color: var(--umfc-bg-color);
  border: 1px solid var(--umfc-border-color); border-radius: 50%;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  box-shadow: var(--umfc-shadow-sm);
}
.umfc-v2 .umfc-radio-control:hover input ~ .umfc-radio-indicator {
  border-color: #adb5bd;
}
.umfc-v2 .umfc-radio-control input:checked ~ .umfc-radio-indicator {
  border-color: var(--umfc-primary-color);
}
.umfc-v2 .umfc-radio-indicator::after {
  content: ""; position: absolute; display: none;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%; background-color: var(--umfc-primary-color);
}
.umfc-v2 .umfc-radio-control input:checked ~ .umfc-radio-indicator::after { display: block; }
.umfc-v2 .umfc-radio-control input:focus-visible ~ .umfc-radio-indicator {
  box-shadow: var(--umfc-shadow-focus), var(--umfc-shadow-sm);
  border-color: var(--umfc-border-focus-color);
}
.umfc-v2 .umfc-radio-control.umfc-disabled {
  color: var(--umfc-disabled-text); cursor: not-allowed;
}
.umfc-v2 .umfc-radio-control.umfc-disabled input ~ .umfc-radio-indicator {
  background-color: var(--umfc-disabled-bg); border-color: var(--umfc-disabled-border); opacity: 0.7;
}
.umfc-v2 .umfc-radio-control.umfc-disabled input:checked ~ .umfc-radio-indicator::after {
  background-color: #a0aec0;
}

.umfc-v2 .umfc-input.umfc-datetime {
    min-width: 180px;
}
.umfc-v2 .umfc-input-color {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  width: 44px;
  height: calc(1.5em + var(--umfc-input-padding-y) * 2 + 2px);
  padding: 0.25rem; background-color: transparent;
  border: 1px solid var(--umfc-border-color); border-radius: var(--umfc-border-radius);
  cursor: pointer; box-shadow: var(--umfc-shadow-sm);
}
.umfc-v2 .umfc-input-color::-webkit-color-swatch-wrapper { padding: 0; }
.umfc-v2 .umfc-input-color::-webkit-color-swatch { border: none; border-radius: calc(var(--umfc-border-radius) - 3px); }
.umfc-v2 .umfc-input-color::-moz-color-swatch { border: none; border-radius: calc(var(--umfc-border-radius) - 3px); }
.umfc-v2 .umfc-input-color:focus {
  border-color: var(--umfc-border-focus-color); outline: 0; box-shadow: var(--umfc-shadow-focus);
}

.umfc-v2 .umfc-file-input-wrapper { display: flex; align-items: center; }
.umfc-v2 .umfc-input-file-hidden { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }
.umfc-v2 .umfc-file-button {
  display: inline-block; padding: var(--umfc-input-padding-y) var(--umfc-input-padding-x);
  font-size: 0.95rem; font-weight: 500; color: #374151;
  background-color: #f3f4f6; border: 1px solid var(--umfc-border-color);
  border-radius: var(--umfc-border-radius); cursor: pointer; 
  transition: background-color 0.2s ease, border-color 0.2s ease; box-shadow: var(--umfc-shadow-sm);
}
.umfc-v2 .umfc-file-button:hover { background-color: #e5e7eb; border-color: #9ca3af; }
.umfc-v2 .umfc-file-name-display { margin-left: 12px; font-size: 0.9rem; color: #6b7280; }

.umfc-v2 .umfc-button-group { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.umfc-v2 .umfc-button {
  display: inline-block; font-weight: 500; text-align: center; vertical-align: middle;
  cursor: pointer; user-select: none; background-color: transparent; border: 1px solid transparent;
  padding: var(--umfc-input-padding-y) calc(var(--umfc-input-padding-x) * 1.25);
  font-size: 0.95rem; line-height: 1.5; border-radius: var(--umfc-border-radius);
  transition: all 0.15s ease-in-out;
  box-shadow: var(--umfc-shadow-sm);
}
.umfc-v2 .umfc-button:focus-visible { outline: 0; box-shadow: var(--umfc-shadow-focus), var(--umfc-shadow-sm); }
.umfc-v2 .umfc-button:active { transform: translateY(1px); box-shadow: none; }
.umfc-v2 .umfc-button:disabled { opacity: 0.6; cursor: not-allowed; box-shadow: none; }

.umfc-v2 .umfc-btn-primary { color: #fff; background-color: var(--umfc-primary-color); border-color: var(--umfc-primary-color); }
.umfc-v2 .umfc-btn-primary:hover { background-color: var(--umfc-primary-hover-color); border-color: var(--umfc-primary-hover-color); }
.umfc-v2 .umfc-btn-secondary { color: #fff; background-color: var(--umfc-secondary-color); border-color: var(--umfc-secondary-color); }
.umfc-v2 .umfc-btn-secondary:hover { background-color: var(--umfc-secondary-hover-color); border-color: var(--umfc-secondary-hover-color); }

.umfc-v2 .umfc-btn-success { color: #fff; background-color: #10b981; border-color: #10b981; }
.umfc-v2 .umfc-btn-success:hover { background-color: #059669; border-color: #047857; }
.umfc-v2 .umfc-btn-danger { color: #fff; background-color: #ef4444; border-color: #ef4444; }
.umfc-v2 .umfc-btn-danger:hover { background-color: #dc2626; border-color: #b91c1c; }
.umfc-v2 .umfc-btn-warning { color: #1f2937; background-color: #f59e0b; border-color: #f59e0b; }
.umfc-v2 .umfc-btn-warning:hover { background-color: #d97706; border-color: #b45309; }
.umfc-v2 .umfc-btn-info { color: #fff; background-color: #3b82f6; border-color: #3b82f6; }
.umfc-v2 .umfc-btn-info:hover { background-color: #2563eb; border-color: #1d4ed8; }
.umfc-v2 .umfc-btn-light { color: #1f2937; background-color: #f3f4f6; border-color: #e5e7eb; }
.umfc-v2 .umfc-btn-light:hover { background-color: #e5e7eb; border-color: #d1d5db; }
.umfc-v2 .umfc-btn-dark { color: #fff; background-color: #1f2937; border-color: #1f2937; }
.umfc-v2 .umfc-btn-dark:hover { background-color: #111827; border-color: #000000; }

.umfc-v2 .umfc-btn-outline-primary { color: var(--umfc-primary-color); border-color: var(--umfc-primary-color); background-color:transparent; box-shadow: none; }
.umfc-v2 .umfc-btn-outline-primary:hover { color: #fff; background-color: var(--umfc-primary-color); }
.umfc-v2 .umfc-btn-outline-secondary { color: var(--umfc-secondary-color); border-color: var(--umfc-secondary-color); background-color:transparent; box-shadow: none;}
.umfc-v2 .umfc-btn-outline-secondary:hover { color: #fff; background-color: var(--umfc-secondary-color); }

.umfc-v2 .umfc-note { text-align: center; font-size: 0.85em; color: #6b7280; margin-top: 30px; padding: 10px; background-color: #f3f4f6; border-radius:var(--umfc-border-radius); }
.umfc-v2 .umfc-check-radio-group { display: flex; flex-direction: column; gap: 0.75rem; }
.umfc-v2 .umfc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.umfc-v2 .umfc-grid-pickers input { min-width:160px; }

<div class="umfc-showcase-container umfc-v2">
  <h1 class="umfc-main-title">Modern Form Controls</h1>

<fieldset class="umfc-fieldset">
    <legend class="umfc-legend">Text & Number Inputs</legend>
    <div class="umfc-grid">
      <div class="umfc-input-group"><label for="umfcText" class="umfc-label">Text</label><input type="text" id="umfcText" class="umfc-input" placeholder="Enter text..."></div>
      <div class="umfc-input-group"><label for="umfcEmail" class="umfc-label">Email</label><input type="email" id="umfcEmail" class="umfc-input" placeholder="name@example.com"></div>
      <div class="umfc-input-group"><label for="umfcPass" class="umfc-label">Password</label><input type="password" id="umfcPass" class="umfc-input" placeholder="Password"></div>
      <div class="umfc-input-group"><label for="umfcNum" class="umfc-label">Number</label><input type="number" id="umfcNum" class="umfc-input" placeholder="123"></div>
      <div class="umfc-input-group"><label for="umfcSearch" class="umfc-label">Search</label><input type="search" id="umfcSearch" class="umfc-input" placeholder="Search..."></div>
      <div class="umfc-input-group"><label for="umfcTel" class="umfc-label">Telephone</label><input type="tel" id="umfcTel" class="umfc-input" placeholder="123-456-7890"></div>
      <div class="umfc-input-group"><label for="umfcUrl" class="umfc-label">URL</label><input type="url" id="umfcUrl" class="umfc-input" placeholder="https://example.com"></div>
      <div class="umfc-input-group"><label for="umfcTextDis" class="umfc-label">Disabled</label><input type="text" id="umfcTextDis" class="umfc-input" placeholder="Disabled" disabled></div>
    </div>
  </fieldset>

<fieldset class="umfc-fieldset">
    <legend class="umfc-legend">Textarea</legend>
    <div class="umfc-input-group">
        <label for="umfcArea" class="umfc-label">Message</label>
        <textarea id="umfcArea" class="umfc-textarea" rows="4" placeholder="Enter your message here..."></textarea>
    </div>
  </fieldset>

<fieldset class="umfc-fieldset">
    <legend class="umfc-legend">Select Dropdown</legend>
    <div class="umfc-grid">
        <div class="umfc-input-group">
            <label for="umfcSel" class="umfc-label">Choose Option</label>
            <div class="umfc-select-wrapper">
                <select id="umfcSel" class="umfc-select">
                <option value="" disabled selected>Select an option...</option>
                <option value="1">Modern Option 1</option>
                <option value="2">Modern Option 2 is Longer</option>
                <option value="3">Modern Option 3</option>
                </select>
            </div>
        </div>
        <div class="umfc-input-group">
            <label for="umfcSelDis" class="umfc-label">Disabled Select</label>
            <div class="umfc-select-wrapper umfc-disabled">
                <select id="umfcSelDis" class="umfc-select" disabled>
                <option value="">Disabled Select</option>
                </select>
            </div>
        </div>
    </div>
  </fieldset>

<fieldset class="umfc-fieldset">
    <legend class="umfc-legend">Checkboxes (Custom)</legend>
    <div class="umfc-check-radio-group">
        <label class="umfc-checkbox-control">
            <input type="checkbox" name="cbSample" checked>
            <span class="umfc-checkbox-indicator"></span> Custom Checkbox 1
        </label>
        <label class="umfc-checkbox-control">
            <input type="checkbox" name="cbSample2">
            <span class="umfc-checkbox-indicator"></span> Custom Checkbox 2
        </label>
        <label class="umfc-checkbox-control umfc-disabled">
            <input type="checkbox" name="cbSample3" disabled checked>
            <span class="umfc-checkbox-indicator"></span> Disabled Checked
        </label>
         <label class="umfc-checkbox-control umfc-disabled">
            <input type="checkbox" name="cbSample4" disabled>
            <span class="umfc-checkbox-indicator"></span> Disabled Unchecked
        </label>
    </div>
  </fieldset>

<fieldset class="umfc-fieldset">
    <legend class="umfc-legend">Radio Buttons (Custom)</legend>
    <div class="umfc-check-radio-group">
        <label class="umfc-radio-control">
            <input type="radio" name="radioSample" value="r1" checked>
            <span class="umfc-radio-indicator"></span> Custom Radio Option A
        </label>
        <label class="umfc-radio-control">
            <input type="radio" name="radioSample" value="r2">
            <span class="umfc-radio-indicator"></span> Custom Radio Option B
        </label>
        <label class="umfc-radio-control umfc-disabled">
            <input type="radio" name="radioSampleDis" value="r3" disabled checked>
            <span class="umfc-radio-indicator"></span> Disabled Radio Checked
        </label>
        <label class="umfc-radio-control umfc-disabled">
            <input type="radio" name="radioSampleDis2" value="r4" disabled>
            <span class="umfc-radio-indicator"></span> Disabled Radio Unchecked
        </label>
    </div>
  </fieldset>
  
  <fieldset class="umfc-fieldset">
    <legend class="umfc-legend">Date, Time & Color Pickers</legend>
    <div class="umfc-grid umfc-grid-pickers">
      <div class="umfc-input-group"><label for="umfcDate" class="umfc-label">Date</label><input type="date" id="umfcDate" class="umfc-input umfc-datetime"></div>
      <div class="umfc-input-group"><label for="umfcTime" class="umfc-label">Time</label><input type="time" id="umfcTime" class="umfc-input umfc-datetime"></div>
      <div class="umfc-input-group"><label for="umfcDTL" class="umfc-label">Datetime-Local</label><input type="datetime-local" id="umfcDTL" class="umfc-input umfc-datetime"></div>
      <div class="umfc-input-group"><label for="umfcMonth" class="umfc-label">Month</label><input type="month" id="umfcMonth" class="umfc-input umfc-datetime"></div>
      <div class="umfc-input-group"><label for="umfcWeek" class="umfc-label">Week</label><input type="week" id="umfcWeek" class="umfc-input umfc-datetime"></div>
      <div class="umfc-input-group"><label for="umfcColor" class="umfc-label">Color</label><input type="color" id="umfcColor" class="umfc-input-color" value="#2563eb"></div>
    </div>
  </fieldset>

<fieldset class="umfc-fieldset">
    <legend class="umfc-legend">File Input</legend>
    <div class="umfc-input-group">
        <label class="umfc-label">Upload Document</label>
        <div class="umfc-file-input-wrapper">
            <input type="file" id="umfcFileModern" class="umfc-input-file-hidden">
            <label for="umfcFileModern" class="umfc-file-button">Choose File</label>
            <span class="umfc-file-name-display">No file selected</span>
        </div>
    </div>
  </fieldset>

<fieldset class="umfc-fieldset">
    <legend class="umfc-legend">Buttons</legend>
    <div class="umfc-button-group">
      <button class="umfc-button umfc-btn-primary">Primary Action</button>
      <button class="umfc-button umfc-btn-secondary">Secondary</button>
      <button class="umfc-button umfc-btn-success">Success</button>
      <button class="umfc-button umfc-btn-danger">Danger</button>
    </div>
    <div class="umfc-button-group">
      <button class="umfc-button umfc-btn-warning">Warning</button>
      <button class="umfc-button umfc-btn-info">Info</button>
      <button class="umfc-button umfc-btn-light">Light</button>
      <button class="umfc-button umfc-btn-dark">Dark</button>
    </div>
    <div class="umfc-button-group">
      <button class="umfc-button umfc-btn-outline-primary">Outline Primary</button>
      <button class="umfc-button umfc-btn-outline-secondary">Outline Secondary</button>
      <button class="umfc-button umfc-btn-primary" disabled>Disabled Primary</button>
    </div>
  </fieldset>
</div>