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>