CSS Number Fields

Numbers fields
  1. $ / month
  2. $ / click min="0.15" max="100"
	                <form class="form">
	<fieldset>
		<legend>Numbers fields</legend>
		<ol>
			<li>
				<label for="tel-field">Telephone Field</label>
				<input type="tel" id="tel-field" />
			</li>
			<li>
				<label for="text-field22">Number Field</label>
				<span>$</span>
				<input type="number" id="text-field22" placeholder="0" min="0.15" />
				<span>/ month</span>
			</li>
			<li>
				<label for="text-field23">Number Field</label>
				<span>$</span>
				<input type="number" id="text-field23" placeholder="0" min="0.15" max="100" />
				<span>/ click</span>
				<span class="explain">min="0.15" max="100"</span>
			</li>
			<li>
				<label for="date-field">Date Field</label>
				<input type="date" id="date-field" />
			</li>

			<li>
				<label for="datetime-local">datetime-local</label>
				<input type="datetime-local" id="datetime-local" />
			</li>
			<li>
				<label for="month">month</label>
				<input type="month" id="month" />
			</li>
		</ol>
	</fieldset>
</form>
                

Customize the appearance

You can customize the appearance of this object by setting up in your config folder the following map. By default de values are the indicated here.

 $object-forms-vars-custom: (
// Field
field-font-family: $font-face-default,
field-font-size: $font-size-default,
field-font-weight: normal,
field-background: #FFF,
field-color: #000,
field-padding: $spacing/2 $spacing/2,
field-margin: 0 0 $spacing,
field-border-radius: 2px,
field-border: 1px solid rgba($color-foreground, .3),
field-box-shadow: "inset 0 2px 8px rgba(#{$color-foreground}, .2), 0 1px 1px rgba(#{$color-background}, .5)",
field-placeholder-color: rgba($color-foreground, .3),
// Field focus
field-focus-border: rgba($color-primary, .5),
field-focus-background: lighten($color-primary, 50),

// Field error
field-error-border: 1px solid adjust-lightness($color-ko, 10%),
field-error-background: adjust-lightness($color-ko, 42%)
) !global !default;