About this snippet

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.

Size
20.2 KB
Uses
HTML, CSS
Loads
Nothing external
Views
544

Collections

Related snippets

<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>
: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; }

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save