MENU

チェックボックス、ラジオボタン、セレクトBOX

目次

チェックボックス

<div class="cbWpr">
    <label class="cbUnit" for="s1">
        <input type="checkbox" class="option-input02 checkbox" id="s1">
        <span class="exbold">非排他的選択肢</span>
    </label>
</div>
.cbWpr {
  	display: flex;
  	flex-wrap: wrap;
  	margin: 0;
}

.cbWpr label.cbUnit {
    display: inline-block;
    margin: 0 20px 0 0;
  	font-size: 16px;
  	line-height: 40px;
    cursor: pointer;
}

.cbWpr label.cbUnit input {
  	position: relative;
  	width: 18px;
  	height: 18px;
  	margin-right: .5rem;
  	margin-bottom: 2px;
  	cursor: pointer;
  	transition: all 0.15s ease-out 0s;
  	outline: none;
  	background: #FFF;
  	border: 2px solid #CFCFCF;
  	-webkit-appearance: none;
  	        appearance: none;
}

.cbWpr label.cbUnit input:hover,
.cbWpr label.cbUnit input:checked {
	  background: #F6F6F6;
}

.cbWpr label.cbUnit input:checked::before {
  	font-size: 18px;
  	line-height: 24px;
  	position: absolute;
  	display: inline-block;
  	top: 3px;
  	left: 3px;
  	width: 8px;
  	height: 8px;
  	content: '';
    background-color: #777;
  	text-align: left;
  	color: #FFF;
}
目次