CSS Text Fields

Text fields
Details
Details opened. Click arrow to close it

This is details text.

This is details text.

This is details text.

Details closed. Click arrow to open it

HELLO! YOU HAVE OPENED DETAILS!

	                <form class="form">
	<fieldset>
		<legend>Text fields</legend>
		<ol>
			<li>
				<label for="text-field">Text Field 100%</label>
				<input type="text" id="text-field" placeholder="Text field 100%"/>
			</li>
			<li>
				<label for="text-field2">Text Field <em>label class="w-50"</em></label>
				<input type="text" id="text-field2" class="w-50" placeholder="Text field 50% - w-50"/>
			</li>

			<li>
				<label for="url-field">URL Field</label>
				<input type="url" id="url-field" />
			</li>
			<li>
				<label for="email-field">Email Field</label>
				<input type="email" id="email-field" placeholder="email" />
			</li>
			<li>
				<label for="Password-field">Password Field</label>
				<input type="password" id="Password-field" />
			</li>
			<li>
				<label for="color-field">Color Field</label>
				<input type="color" id="color-field" />
			</li>
			<li>
				<label for="text-area">Textarea</label>
				<textarea id="text-area"></textarea>
			</li>
		</ol>
	</fieldset>
	<fieldset>
		<legend>Details</legend>
		<details open>
			<summary>Details opened. <em>Click arrow to close it</em></summary>
			<p>This is details text.</p>
			<p>This is details text.</p>
			<p>This is details text.</p>
		</details>
		<details>
			<summary>Details closed. <em>Click arrow to open it</em></summary>
			<p class="fz-h1">HELLO! YOU HAVE OPENED DETAILS!</p>
		</details>
	</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;