Get started

Font

CSS Components

CSS Elements

Doc

Forms

minstyle.io allows you to simply design attractive and complete forms. Different styles are available on the <input>, as shown below:

Simple <input>

<div class="col-s-12">
	<label for="Login">Login</label>
	<input type="text" value="Login" id="Login">
</div>

<div class="col-s-12">
	<label for="password">Password</label>
	<input type="password" placeholder="Password" id="password">
</div>

Rounded <input>

<div class="col-s-12">
	<label for="Login">Login</label>
	<input type="text" value="Login" id="Login" class="ms-rounded">
</div>

<input> Sizes

<div class="col-s-12">
	<label for="Login">Login</label>
	<input type="text" value="Login" id="Login" class="ms-large">
</div>

<div class="col-s-12">
	<label for="password">Password</label>
	<input type="password" placeholder="Password" id="password" class="ms-small">
</div>

<input> Colors

<div class="col-s-12">
	<label for="Login">Login</label>
	<input type="text" value="Login" id="Login" class="ms-green">
</div>

<div class="col-s-12">
	<label for="Login">Login</label>
	<input type="text" value="Login" id="Login" class="ms-red">
</div>

<div class="col-s-12">
	<label for="Login">Login</label>
	<input type="text" value="Login" id="Login" class="ms-blue">
</div>

<div class="col-s-12">
	<label for="Login">Login</label>
	<input type="text" value="Login" id="Login" class="ms-yellow">
</div>

Example

Select your value !

<form>
	<fieldset>
		<div class="col-s-12 col-m-6">
			<label for="name">Name</label>
			<input type="text" value="Name" id="name" disabled="">
		</div>

		<div class="col-s-12 col-m-6">
			<label for="password">Password</label>
			<input type="password" placeholder="Password" id="password" class="ms-blue">
		</div>

		<div class="col-s-12 col-m-6">
			<label for="mail">Mail</label>
			<input type="email" value="mail@mail.fr" id="mail" class="ms-green">
		</div>

		<div class="col-s-12 col-m-6">
			<label for="password2">Password</label>
			<input type="password" placeholder="Password" id="password2" class="ms-red">
		</div>

		<div class="col-s-12 col-m-6">
			<label for="small">Small</label>
			<input type="text" value="Small" id="small" class="ms-small">
		</div>

		<div class="col-s-12 col-m-6">
			<label for="large">Large</label>
			<input type="text" placeholder="Large" id="large" class="ms-large">
		</div>
			            
		<div class="col-s-12 col-m-6">
			<label for="number">Number</label>
			<input type="number" placeholder="Number" id="number">
		</div>
			            
		<div class="col-s-12 col-m-6">
			<label for="select">Select</label>
			<select id="select">
				<option value="0">0</option>
			    <option value="1">1</option>
			    <option value="2">2</option>
			    <option value="3">3</option>
			    <option value="4">4</option>
			    <option value="5">5</option>
			</select>
			<p class="ms-form-text">Select your value !</p>
		</div>

		<div class="col-s-12 col-m-6">
			<label for="selectm">Multiple select</label>
			<select id="selectm" class="ms-select-multiple" multiple="">
				<option value="0">0</option>
			    <option value="1">1</option>
			    <option value="2">2</option>
			    <option value="3">3</option>
			    <option value="4">4</option>
			    <option value="5">5</option>
			</select>
		</div>

		<div class="col-s-12 col-m-6">
			<label for="rounded">Rounded</label>
			<input type="text" value="Rounded" id="rounded" class="ms-rounded">
		</div>

		<div class="col-s-12">
			<label for="textarea">Textarea</label>
			<textarea placeholder="My comment..." id="textarea"></textarea>
		</div>

		<div class="col-s-12">
			<input type="checkbox" id="checkbox">
			<label class="label-inline" for="checkbox">Checkbox</label>
		</div>

		<div class="col-s-12">
			<input class="ms-btn ms-rounded ms-large ms-green" type="submit" value="Send">
			<a class="ms-btn ms-border-bottom ms-red">Cancel</a>
		</div>
	</fieldset>
</form>