Add custom checkbox

This commit is contained in:
Ken-Håvard Lieng 2018-06-10 21:25:58 +02:00
parent b07d1eb871
commit 3d2dbd5527
3 changed files with 35 additions and 8 deletions

File diff suppressed because one or more lines are too long

View File

@ -53,6 +53,36 @@ button:active {
background: #6bb758; background: #6bb758;
} }
input[type=checkbox] {
position: absolute;
opacity: 0;
}
input[type=checkbox] + span {
width: 20px;
height: 20px;
border: 2px solid #777;
display: inline-block;
position: relative;
}
input[type=checkbox]:checked + span {
background: #6bb758;
border-color: #6bb758;
}
input[type=checkbox]:checked + span:before {
content: "";
width: 5px;
height: 10px;
border-right: 3px solid #FFF;
border-bottom: 3px solid #FFF;
position: absolute;
color: #FFF;
transform: rotate(45deg);
left: 4px;
}
p { p {
line-height: 1.5; line-height: 1.5;
} }
@ -344,10 +374,6 @@ input::-webkit-inner-spin-button {
color: #777; color: #777;
} }
.connect-form-address input[type='checkbox'] {
margin-top: 5px;
}
.connect-form i { .connect-form i {
display: block; display: block;
cursor: pointer; cursor: pointer;

View File

@ -21,6 +21,7 @@ const Checkbox = ({ name, label, onChange, ...props }) => (
}} }}
{...props} {...props}
/> />
<span />
</label> </label>
)} )}
/> />