form snippet test



```ruby:html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.css">
<style>
* {
  font-size: inherit;
  line-height: inherit;
}
*,
*::before,
*::after {
  box-sizing: inherit;
}
html {
  font-size: 62.5%;
}
body {
  box-sizing: border-box;
  padding: 20px;
  font-size: 1.4rem;
}
a {
  color: #00f;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
p, ul {
  margin: 0;
}
fieldset {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}
fieldset p {
display: inline;
}

/* input spinner */
.input-spinner {
  display: flex;
  padding: 0;
  border: 1px solid #000;
}
.input-spinner input {
  box-sizing: border-box;
  flex: 1;
  height: 22px;
  margin: 0;
  padding: 2px 4px;
  border: 0;
  outline: none;
}
.input-spinner [type="number"]::-webkit-outer-spin-button,
.input-spinner [type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.input-spinner [type="number"] {
  -moz-appearance: textfield;
}
.input-spinner button {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 23px;
  height: 22px;
  border: 0;
  border-left: 1px solid #000;
  background-color: #fff;
  text-indent: 100%;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
}
.input-spinner button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-10%) rotate(-45deg) skewX(-10deg) skewY(-10deg);
  display: block;
  width: 6px;
  height: 6px;
  border: 2px solid transparent;
  border-top-color: #000;
  border-right-color: #000;
  content: "";
}
.input-spinner button + button::before {
  transform: translate(-50%,-80%) rotate(135deg) skewX(-10deg) skewY(-10deg);
}
.input-spinner button:hover {
  background-color: #ff0;
}
.input-spinner button:hover::before {
  border-top-color: #f00;
  border-right-color: #f00;
}
.input-spinner button:active {
  background-color: #000;
}
.input-spinner button:active::before {
  border-top-color: #fff;
  border-right-color: #fff;
}
.input-spinner button:disabled {
  background-color: #ccc;
  pointer-events: none;
}

/* segmented control */
.segmented-control {
  display: inline-flex;
  min-height: 24px;
  padding: 1px;
  border: 1px solid #000;
  background-color: #fff;
}
.segmented-control .item {
  display: flex;
}
.segmented-control .item:not(:nth-of-type(1)) {
  margin-left: 1px;
}
.segmented-control [type="radio"] {
  display: none;
}
.segmented-control .btn {
  padding: 2px 4px;
  background-color: #eee;
  color: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.segmented-control .btn.-red {
  color: #f00;
}
.segmented-control .btn.-blu {
  color: #00f;
}
.segmented-control .btn:hover {
  background-color: #ff0;
}
.segmented-control .btn:active {
  background-color: #f0f;
}
.segmented-control [type="radio"]:checked + .btn,
.segmented-control .btn.-checked,
.segmented-control .btn.is-checked {
  background-color: #000;
  color: #fff;
}
.segmented-control [type="radio"]:checked + .btn.-red,
.segmented-control .btn.-red.-checked,
.segmented-control .btn.-red.is-checked {
  background-color: #f00;
  color: #fff;
}
.segmented-control [type="radio"]:checked + .btn.-blu,
.segmented-control .btn.-blu.-checked,
.segmented-control .btn.-blu.is-checked {
  background-color: #00f;
  color: #fff;
}
.segmented-control [type="radio"]:disabled + .btn,
.segmented-control .btn.-disabled,
.segmented-control .btn.is-disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

/* input */
.m-inptxt-01 {}

/* radio */
.m-radio-01 {}
.m-rdo-01 {}

/* checkbox */
.m-checkbox-01 {}
.m-chk-01 {}

/* table */
.m-table-01 {}
.m-tbl-01 {}

/* switch */
.m-switch-01 {}

/* icon radio */
.icon-radio-01 {}

</style>
</head>
<body>


<fieldset>
  <div class="input-spinner">
    <input type="number">
    <button type="button">＋</button>
    <button type="button">－</button>
  </div>
</fieldset>

<br>

<div class="segmented-control">
  <label class="item">
    <input type="radio" name="a" checked>
    <span class="btn">btn</span>
  </label>
  <label class="item">
    <input type="radio" name="a" disabled>
    <span class="btn">btn</span>
  </label>
  <label class="item">
    <input type="radio" name="a">
    <span class="btn">btn</span>
  </label>
  <label class="item">
    <input type="radio" name="a">
    <span class="btn -red">btn</span>
  </label>
  <label class="item">
    <input type="radio" name="a">
    <span class="btn -blu">btn</span>
  </label>
</div>

<ul class="segmented-control">
  <li class="item">
    <a href="#" class="btn -checked">link</a>
  </li>
  <li class="item">
    <a href="#" class="btn -disabled">link</a>
  </li>
  <li class="item">
    <a href="#" class="btn">link</a>
  </li>
</ul>

<br>
<br>

<div>
  <label class="input-radio">
    <input type="radio" name="a">
    <i class="input-radio-icon -checked"></i>radio
  </label>
  <label class="input-radio">
    <input type="radio" name="a">
    <i class="_icon"></i>radio
  </label>
</div>

<br>

<div>
<label><input type="checkbox"><i></i>checkbox</label>
</div>

</body>
</html>
```
参考
https://metroui.org.ua/