<div>
<input class="form-control" type="text" placeholder="Type here…">
<select class="form-control">
<option value="">Please choose</option>
<option value="a">Option A</option>
<option value="b">Option B</option>
</select>
<textarea class="form-control" rows="8"></textarea>
</div>
<div>
<input class="form-control" type="text" placeholder="Type here…" />
<select class="form-control">
<option value="">Please choose</option>
<option value="a">Option A</option>
<option value="b">Option B</option>
</select>
<textarea class="form-control" rows="8"></textarea>
</div>
/* No context defined for this component. */
.form-control,
.custom-form-control {
@extend %heading-font-regular;
display: block;
transition: standard-transition(background-color);
padding: $spacer-xs;
width: 100%;
line-height: $form-control-line-height;
font-size: $form-control-font-size;
}
.form-control {
outline: none;
border: 2px solid $form-control-border-color;
border-radius: 0;
caret-color: $form-control-caret-color;
appearance: none;
&:focus {
background-color: $form-control-focus-bg;
color: $form-control-focus-color;
}
&::placeholder {
color: $form-control-placeholder-color;
}
&--invalid {
border-color: $form-control-invalid-border-color;
}
}
.custom-form-control {
position: relative;
transition: standard-transition(background-color, color, border-color);
min-height: ($base-line-height * 1rem);
&.form-control--invalid,
.form-group--invalid & {
.form-label,
.form-text {
color: $form-control-invalid-border-color;
}
.form-label {
&::before {
border-color: $form-control-invalid-border-color;
}
}
}
// Hide the real input inside
> .form-control__input {
position: absolute;
opacity: 0;
z-index: -1; // Put the input behind the label so it doesn't overlay text
}
}
There are no notes for this item.