Contents

/* Form styles */
.h5f
{
  margin: 20px auto;
  width: 610px;
}
.h5f fieldset  
{
  margin: 0 0 20px;
  padding: 20px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.h5f ol
{
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.h5f li
{
  margin: 0 0 12px;
  position: relative;
}
.h5f label, .h5f .label
{
  width: 150px;
  display: inline-block;
  vertical-align: top;
}
.h5f fieldset input,
.h5f fieldset textarea,
.h5f fieldset select
{
  background: #fff url(/assets/h5f/form_validation.png) 379px 24px no-repeat;
  display: inline-block;
  width: 371px;
  border: 1px solid #fff;
  padding: 3px 26px 3px 3px;
  
  -moz-transition: background-color 1s ease;
  -webkit-transition: background-color 1s ease;
  -o-transition: background-color 1s ease;
  transition: background-color 1s ease;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.h5f fieldset select   { width: 401px; padding: 3px; }
.h5f fieldset #postcode  { padding: 3px; width: 400px; }
  
.h5f fieldset .radchecks input {
  width: auto;
}
.h5f fieldset .radchecks label {
  width: 105px;
}
    

.h5f input::-webkit-input-placeholder  { color: #a9a9a9; }
.h5f input:-moz-placeholder      { color: #a9a9a9; }

/* Enhanced error styling */
.h5f input.error
{
  background-color: pink; 
  background-position: 379px 3px;
  outline: none; 
}
.h5f input.required
{
  background-color: #fff; 
  background-position: 379px -29px;
}
.h5f input.valid
{ 
  background-color: #fff;
  background-position: 379px -61px;
}
.h5f fieldset input:required:valid
{ 
  background-color: #fff;
  background-position: 379px -61px;
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
html5forms-rails-0.1.4	vendor/assets/stylesheets/h5f.css
html5forms-rails-0.1.3	vendor/assets/stylesheets/h5f.css