CSS Styled Form Elements

Created purely with CSS, these UI form elements require no image or icon files and are perfect for hi-res display devices. Tested and renders well in IE 10+ and all other browsers.

Use these elements in your project by previewing the HTML code examples and downloading the CSS source files.

Compatible With:

HTML

!DOCTYPE html
html
head
meta charset="UTF-8"
title Page Title /title

Link the buttons CSS stylesheet to your HTML document
link rel="stylesheet" type="text/css" href="sji-buttons-min.css"

/head
body

form
  Create a default input text field
  input class="sji-text" type="text" placeholder="Enter text..."

  Create a default input text area field
  textarea class="sji-text" placeholder="Type message..."

  Create a blue input text field
  input class="sji-text blue" type="text" placeholder="Enter text..."

  Create a blue input text field with rounded ends
  input class="sji-text blue round" type="text" placeholder="Enter text..."

  Create a select option list
  label class="sji-select"
    select
      option value="0" selectedSelect Item.../option
      option value="1"Item 1/option
      option value="2"Item 2/option
      option value="3"Item 3/option
    /select
  /label

Create radio button group
label class="sji-radio"
  input type="radio" name="RadioGroup1" checked
  span/span
/label

label class="sji-radio blue"...make this bue
  input type="radio" name="RadioGroup1"
  span/span
/label

label class="sji-radio green"...make this green
  input type="radio" name="RadioGroup1"
  span/span
/label

Create checkbox
label class="sji-checkbox"
  input type="checkbox" checked
  span/span
/label

label class="sji-checkbox blue"...make this blue
  input type="checkbox"
  span/span
/label

label class="sji-checkbox green"...make this green
  input type="checkbox"
  span/span
/label

Create a toggle switch
label class="sji-switch"
  input type="checkbox"
  span data-on="On" data-off="Off"/span
/label

label class="sji-switch square"...make this square
  input type="checkbox"
  span data-on="On" data-off="Off"/span
/label

label class="sji-switch square blue"...make this square and blue
  input type="checkbox"
  span data-on="On" data-off="Off"/span
/label

label class="sji-switch check"...make this with no "On/Off" label. Use check-mark icon instead
  input type="checkbox"
  span data-on="On" data-off="Off"/span
/label

Create Submit Button
input class="sji-btn" type="submit" value="Send Form"

input class="sji-btn blue" type="submit" value="Send Form"...make this blue

input class="sji-btn blue glossy round" type="submit" value="Send Form"...blue, glossy with rounded ends

/form

/body
/html

CSS Styled Form Elements

HTML

CSS

Javascript