mytabworks-react-form-validator/field.css

This repository was build from the ground up. it is as expected to be a light-weight and fast because of the optimization.\nIt is a powerful yet light-weight dependency that can benefit both dev and user at it's fullest.

form {
  width: 100%;
}

form *{
box-sizing: border-box;
}

.form-group {
position: relative;
width: 100%;
font-size: 15px;
color: #575b5d;
margin-bottom: 10px;
}

.form-group > label {
display: block;
font-size: inherit;
margin-bottom: 3px;
text-transform: capitalize;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}

.form-group span.required {
color:salmon;
font-style: italic;
}

.form-group.inline-box > label:not([for]) {
display: inline-block;
margin: 5px;
}

.form-group > label:not([for]) {
position: relative;
}

.form-group > label > input[type='checkbox'],
.form-group > label > input[type='radio'] {
width: 1px;
height: 1px;
border: 0px;
visibility: hidden;
}

.form-group input[type='checkbox'] + span,
.form-group input[type='radio'] + span {
display: inline-block;
position: relative;
top: 3px;
width: 17.5px;
height: 17.5px;
background-color: #fff;
border: 1px solid #6c6c6c;
margin-right: 5px;
}


.form-group input[type='radio'] + span {
border-radius: 100%;
}

.form-group input[type='checkbox'] + span:after,
.form-group input[type='radio'] + span:after {
content: "";
display: inline-block;
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}


.form-group input[type='checkbox'] + span:after {
width: 12px;
height: 6px;
}

.form-group input[type='checkbox']:checked + span:after {
border: 2px solid #5fab5f;
border-top-width: 0px;
border-right-width: 0px;
transform-origin: center;
transform: translate(-50%, -50%) rotate(-45deg);
}

.form-group input[type='radio'] + span:after {
width: 10px;
height: 10px;
border-radius: 100%;
}

.form-group input[type='radio']:checked + span:after {
background-color: #5fab5f;
}
.form-group > input[type='color'] {
padding: 0;
}

.form-group > input,
.form-group > select,
.form-group > textarea {
width: 100%;
display: block;
padding: 10px 15px;
border: 1px solid #dbe0e3;
border-radius: 1px;
font-size: 15px;
margin-bottom: 4px;
}

.form-group > .error-msg {
display: block;
color: salmon;
font-style: italic;
font-size: 14px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
}

.form-group.form-error input,
.form-group.form-error select,
.form-group.form-error textarea,
.form-group.form-error input[type='checkbox'] + span,
.form-group.form-error input[type='radio'] + span {
border-color: salmon;
}

.form-group input[type='checkbox']:disabled + span,
.form-group input[type='radio']:disabled + span,
.form-group > input:disabled,
.form-group > input:read-only,
.form-group > select:disabled,
.form-group > textarea:disabled {
background-color: #e0e0e0 !important;
}

.form-group input[type='radio']:checked:disabled + span:after{
background-color: #8c8c8c !important;
}
.form-group input[type='checkbox']:disabled + span:after {
border-color: #8c8c8c;
}