Text Fields

Just add the class .form to your form and take a break.

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="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="h3">HELLO! YOU HAVE OPENED DETAILS!</p>
		</details>
	</fieldset>
</form>