CSS Option Fields

Checkbox and Radio buttons
  1. Switch options(optional)
    • Hyperspace
  2. Details: Checkbox options (optional)
  3. Details: Radio buttons
  4. Details: Horizontal
Complex radio button - widh icon
Complex radio button - without icon
Extra checkbox
  • Preview ad
  • Preview ad
	                <form class="form">
	<fieldset>
		<legend>Checkbox and Radio buttons</legend>
		<ol>
			<li>
				<details open="">
					<summary>Switch options<em>(optional)</em></summary>
					<ul>
						<li>
							<div class="switch">
								<input id="switch" type="checkbox">
								<label for="switch" data-off="NO" data-on="YES"></label>
							</div>
							Hyperspace
						</li>
					</ul>
				</details>
			</li>
			<li>
				<details open="">
					<summary>Details: Checkbox options <em>(optional)</em></summary>
					<ul>
						<li>
							<label for="browser_ff">
								<input id="browser_ff" name="available_browsers[]" class="checkbox" type="checkbox" value="ff">
								Firefox
							</label>
						</li>
						<li>
							<label for="browser_ie">
								<input id="browser_ie" name="available_browsers[]" class="checkbox" type="checkbox" value="ie">
								Internet explorer
							</label>
						</li>
						<li>
							<label for="browser_ch">
								<input id="browser_ch" name="available_browsers[]" class="checkbox" type="checkbox" value="ch">
								Chrome
							</label>
						</li>
						<li>
							<label for="browser_op">
								<input id="browser_op" name="available_browsers[]" class="checkbox" type="checkbox" value="op">
								Opera
							</label>
						</li>
						<li>
							<label for="browser_sa">
								<input id="browser_sa" name="available_browsers[]" class="checkbox" type="checkbox" value="sa">
								Safari
							</label>
						</li>
					</ul>
				</details>
			</li>
			<li>
				<details open="">
					<summary>Details: Radio buttons</summary>
					<ul>
						<li>
							<label for="first-option"><input type="radio" id="first-option" name="radio" /> First option</label>
						</li>
						<li>
							<label for="second-option"><input type="radio" id="second-option" name="radio" /> Second option</label>
						</li>
						<li>
							<label for="third-option"><input type="radio" id="third-option" name="radio" /> Third option</label>
						</li>
					</ul>
				</details>
			</li>
			<li>
				<details open="">
					<summary>Details: Horizontal</summary>
					<ul class="list-horizontal">
						<li>
							<label for="first-option1"><input type="radio" id="first-option1" name="radio" /> First option</label>
						</li>
						<li>
							<label for="second-option1"><input type="radio" id="second-option1" name="radio" /> Second option</label>
						</li>
						<li>
							<label for="third-option1"><input type="radio" id="third-option1" name="radio" /> Third option</label>
						</li>
					</ul>
				</details>
			</li>
		</ol>
	</fieldset>
	<fieldset>
		<legend>Complex radio button - widh icon</legend>
		<ol>
			<li>
				<ul class="radio-list-complex">
					<li>
						<input type="radio" name="complex-radio" id="complex-radio-1" />
						<label for="complex-radio-1">
							<img src="../static/img/chuck.jpg" alt="image" />
							<span class="title">Complex option 1</span>
						</label>
					</li>
					<li class="selected">
						<input type="radio" name="complex-radio" id="complex-radio-2" checked="checked" />
						<label for="complex-radio-2">
							<img src="../static/img/chuck.jpg" alt="image" />
							<span class="title">Complex option 2</span>
							<span><em>Lorem ipsum dolor sit amet.</em></span>
						</label>
					</li>
					<li>
						<input type="radio" name="complex-radio" id="complex-radio-3" />
						<label for="complex-radio-3">
							<img src="../static/img/chuck.jpg" alt="image" />
							<span class="title">Complex option 3</span>
							<span><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em></span>
						</label>
					</li>
					<li>
						<input type="radio" name="complex-radio" id="complex-radio-4" />
						<label for="complex-radio-4">
							<img src="../static/img/chuck.jpg" alt="image" />
							<span class="title">Complex option 4</span>
							<span><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em></span>
						</label>
					</li>
					<li>
						<input type="radio" name="complex-radio" id="complex-radio-5" />
						<label for="complex-radio-5">
							<img src="../static/img/chuck.jpg" alt="image" />
							<span class="title">Complex option 5</span>
							<span><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</em></span>
						</label>
					</li>
				</ul>
			</li>
		</ol>
	</fieldset>
	<fieldset>
		<legend>Complex radio button - without icon</legend>
		<ul class="radio-list-complex no-icon">
			<li>
				<input type="radio" id="listed_ad_yes" name="choice_listed" value="yes" />
				<label for="listed_ad_yes">
					<span class="title d-i">Yes,</span> <em>My software is currently listed on Softonic website</em>
				</label>
			</li>
			<li>
				<input type="radio" id="not_listed_ad" name="choice_listed" value="yes">
				<label for="not_listed_ad">
					<span class="title d-i">No,</span> <em>If your software is not listed yet, create your ad and publish it later</em>
				</label>
			</li>
		</ul>
		<input type="hidden" name="current_action" value="listed" />
	</fieldset>
	<fieldset>
		<legend>Extra checkbox</legend>
		<ul class="checkbox-list-complex no-icon">
			<li>
				<input type="checkbox" id="get-extra" name="choice_listed" value="yes" />
				<label for="get-extra">
					<span class="title">Get extra daily clicks <em>by adding an ad targeting Softonic sections.</em></span>
					<em>Your campaign daily budget will not be exceeded. This ad will complete the campaign consuming the undelivered budget.</em>
				</label>
				<a title="View Sample" href="#" class="icon-eye-open">Preview ad</a>
			</li>
			<li class="selected">
				<input type="checkbox" id="get-extra2" name="choice_listed" value="yes" checked="checked" />
				<label for="get-extra2">
					<span class="title">Get extra daily clicks <em>by adding an ad targeting Softonic sections.</em></span>
					<em>Your campaign daily budget will not be exceeded. This ad will complete the campaign consuming the undelivered budget.</em>
				</label>
				<a title="View Sample" href="#" class="icon-eye-open">Preview ad</a>
			</li>
		</ul>
	</fieldset>
</form>