<div class="title-bar">
	<div class="title-bar-text">サンプル</div>
	<div class="title-bar-controls">
		<button aria-label="Close"></button>
	</div>
</div>
<button>クリック</button>

<div class="field-row">
	<input checked type="checkbox" id="example2">
	<label for="example2">チゲ鍋</label>
</div>
<div class="field-row">
	<input disabled type="checkbox" id="example3">
	<label for="example3">水炊き鍋</label>
</div>
<div class="field-row">
	<input checked disabled type="checkbox" id="example4">
	<label for="example4">とんこつ鍋</label>
</div>

<select>
	<option>東京</option>
	<option>千葉</option>
	<option selected>神奈川</option>
	<option>栃木</option>
	<option>茨城</option>
</select>
<div class="field-row">
	<ul class="tree-view">
		<li>目次</li>
		<li>もふもふ</li>
		<li>
			いぬ
			<ul>
				<li>レトリバー</li>
				<li>チワワ</li>
				<li>ブルドック</li>
			</ul>
		</li>
		<li>
			<details open>
				<summary>ねこ</summary>
				<ul>
					<li>アメリカンショートヘア</li>
					<li>
						<details>
							<summary>三毛猫</summary>
							<ul>
								<li>キジトラ</li>
								<li>
									<details>
										<summary>シャム</summary>
										<ul>
											<li>ロシアンブルー</li>
											<li>ペルシャ</li>
											<li>ラグドール</li>
											<li>マンチカン</li>
										</ul>
									</details>
								</li>
								<li>ブリティッシュショートヘア</li>
								<li>ベンガル</li>
							</ul>
						</details>
					</li>
				</ul>
			</details>
		</li>
		<li>ウサギ</li>
		<li>ホーランドロップ</li>
	</ul>
</div>
div {
	margin: 20px;
}

External CSS

  1. https://unpkg.com/xp.css

External JavaScript

This Pen doesn't use any external JavaScript resources.