input[type=""]

사용자로부터 데이터를 입력받기 위한 태그

html

<div class="input_type">
	<label>
		문자 입력:
		<input type="text">
	</label>
	<br>
	<label>
		숫자 입력:
		<input type="number">
	</label>
	<br>
	<label>
		email 입력1:
		<input type="email">
	</label>
	
	<form action="" onSubmit="return false;">
		<label>
		email 입력2:
		<input type="email">
		</label>
		<input type="submit" value="전송">
		<button type="submit">전송</button>
	</form>
</div>

<div class="custom_checkbox_1">
	<input type="checkbox">
	<span></span>
</div>

css

.custom_checkbox_1 {
	display: inline-block;
	border: 3px solid black;
	border-radius: 5px;
	width: 20px;
	height: 20px;
	position: relative;
}

.custom_checkbox_1 > input[type="checkbox"] {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	width: 100%;
	height: 100%;
	display: block;
	box-sizing: border-box;
	border-radius: 0;
	opacity: 0;
}

.custom_checkbox_1 > input[type="checkbox"] + span::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	box-sizing: border-box;
	pointer-events: none;
}

.custom_checkbox_1 > input[type="checkbox"]:checked + span::after {
	content: "V";
}

.custom_checkbox_1 > input[type="checkbox"]:focus + span::after {
	border: 1px dotted red;
}