Logo

Geekaxon

Welcome User

  • Light Mode Dark Mode Mix Mode
Logo

Geekaxon

Default Input

<form>
    <input type="text" class="form-control">
</form>
:root {
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}

.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
      -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input With Placeholder

<form>
    <input type="text" class="form-control" placeholder="Placeholder Text">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
      -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Disabled Input

<form>
    <input type="text" class="form-control" placeholder="Placeholder Text" disabled>
</form>
:root {
    --light-placeholder: #b4b4b4;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
      -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Predefined Input Value

<form>
    <input type="text" class="form-control" placeholder="Placeholder Text" value="Value Text">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
      -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Readonly Input

<form>
    <input type="text" class="form-control" placeholder="Placeholder Text" value="Value Text" readonly>
</form>
:root {
    --light-placeholder: #b4b4b4;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
      -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Maximum Value

<form>
    <input type="text" class="form-control" placeholder="Placeholder Text" maxlength="6">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
      -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Minimum Value

<form>
    <input type="text" class="form-control" placeholder="Placeholder Text" minlength="5">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
      -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

With Label

<form>
    <div class="form-group">
        <label for="inputId">Label</label>
        <input type="text" class="form-control" id="inputId" placeholder="Placeholder Text">
    </div>
</form>
:root {
    --light-placeholder: #b4b4b4;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
      -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

With Required Label

<form>
    <div class="form-group">
        <label for="inputId">Label</label>
        <input type="text" class="form-control" id="inputId" placeholder="Placeholder Text" required>
    </div>
</form>
:root {
    --light-placeholder: #b4b4b4;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
      -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

With Helper Text Below

With Helper Text Below... 
<form>
    <div class="form-group">
        <label for="inputId">Label</label>
        <input type="text" class="form-control" id="inputId" placeholder="Placeholder Text">
        <span class="helper-text">Helper Text...</span>
    </div>
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
      -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

With Helper Text Above

With Helper Text Above... 
<form>
    <div class="form-group">
        <label for="inputId">Label</label>
        <span class="helper-text">Helper Text...</span>
        <input type="text" class="form-control" id="inputId" placeholder="Placeholder Text">
    </div>
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
      -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

With Description

With Description... 
<form>
    <div class="form-group">
        <label for="inputId">Label</label>
        <input type="text" class="form-control" id="inputId" placeholder="Placeholder Text">
        <span class="description-text">Description...</span>
    </div>
</form>
:root {
    --light-placeholder: #b4b4b4;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
      -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Options

Input Type Text

<form>
    <input type="text" class="form-control" placeholder="Placeholder Text">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Password

<form>
    <input type="password" class="form-control" placeholder="Placeholder Text" autocomplete="new-password">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Tel

<form>
    <input type="tel" class="form-control" placeholder="Placeholder Text">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Email

<form>
    <input type="email" class="form-control" placeholder="Placeholder Text">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type URL

<form>
    <input type="url" class="form-control" placeholder="Placeholder Text">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Search

<form>
    <input type="search" class="form-control" placeholder="Placeholder Text">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Numbers

<form>
    <input type="number" class="form-control" placeholder="Placeholder Text">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Date Time

<form>
    <input type="datetime-local" class="form-control">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Date

<form>
    <input type="date" class="form-control">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Time

<form>
    <input type="time" class="form-control">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Week

<form>
    <input type="week" class="form-control">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Month

<form>
    <input type="month" class="form-control">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type File

<form>
    <input type="file" class="form-control">
</form>
:root {
    --light-base: #f8f8fa;
    --light-active-background: #eeeeee;
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-control[type="file"]::file-selector-button {
    background-color: var(--light-base);
    color: var(--light-input-text-color);
    border-color: var(--light-input-border-color);
    padding-left: 14px;
    padding-right: 14px;
}
.form-control[type="file"]:hover::file-selector-button {
    background-color: var(--light-active-background);
}
.form-control[type="file"]:focus::file-selector-button {
    border-color: var(--light-input-focus-border-color);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Color

<form>
    <input type="color" class="form-control">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-control[type="color"] {
    min-height: 38.63px;
}
.form-control[type="color"]::-webkit-color-swatch {
    border-radius: var(--default-input-border-radius);
    border-color: var(--light-input-border-color);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Type Range

<form>
    <input type="range" class="form-control">
</form>
:root {
    --light-primary: #6562fb;
    --light-input-primary-range-thumb-shadow: rgba(255, 255, 255, 0.6) 0px 0px 0px 1px;
    --light-input-primary-range-thumb-hover-shadow: rgba(101, 98, 251, 0.2) 0px 0px 0px 5px;
    --light-input-primary-range-thumb-active-shadow: rgba(101, 98, 251, 0.25) 0px 0px 0px 8px;
}

.form-control[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    min-height: 10px;
    height: 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 0px;
    border-radius: 20px;
    background-color: var(--light-primary);
    outline: none;
    border: 0px;
}
.form-control[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--light-primary);
    -webkit-box-shadow: var(--light-input-primary-range-thumb-shadow);
        box-shadow: var(--light-input-primary-range-thumb-shadow);
    cursor: pointer;
}
.form-control[type="range"]::-webkit-slider-thumb:hover {
    -webkit-box-shadow: var(--light-input-primary-range-thumb-hover-shadow);
        box-shadow: var(--light-input-primary-range-thumb-hover-shadow);
}
.form-control[type="range"]::-webkit-slider-thumb:active {
    -webkit-box-shadow: var(--light-input-primary-range-thumb-active-shadow);
        box-shadow: var(--light-input-primary-range-thumb-active-shadow);
}
.form-control[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--light-primary);
    box-shadow: var(--light-input-primary-range-thumb-shadow);
    cursor: pointer;
}
.form-control[type="range"]::-moz-range-thumb:hover {
    box-shadow: var(--light-input-primary-range-thumb-hover-shadow);
}
.form-control[type="range"]::-moz-range-thumb:active {
    box-shadow: var(--light-input-primary-range-thumb-active-shadow);
}
.form-control[type="range"]:focus {
    -webkit-box-shadow: none;
        box-shadow: none;
    border: 0px;
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Input Sizes

Other Input Types

<form>
    <input type="file" class="form-control">
</form>
:root {
    --light-base: #f8f8fa;
    --light-active-background: #eeeeee;
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-control[type="file"]::file-selector-button {
    background-color: var(--light-base);
    color: var(--light-input-text-color);
    border-color: var(--light-input-border-color);
}
.form-control[type="file"]:hover::file-selector-button {
    background-color: var(--light-active-background);
}
.form-control[type="file"]:focus::file-selector-button {
    border-color: var(--light-input-focus-border-color);
}
.form-control[type="file"].form-control-xl[type="file"]::file-selector-button {
    margin-top: -10px;
    margin-bottom: -10px;
    margin-left: -12px;
    padding-left: 18px;
    padding-right: 18px;
    line-height: 41.91px;
}
.form-control[type="file"].form-control-lg[type="file"]::file-selector-button {
    margin-top: -8px;
    margin-bottom: -8px;
    margin-left: -12px;
    padding-left: 16px;
    padding-right: 16px;
    line-height: 29.75px;
}
.form-control[type="file"].form-control-sm[type="file"]::file-selector-button {
    margin-top: -5px;
    margin-bottom: -5px;
    margin-left: -12px;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 23.55px;
}
.form-control[type="file"].form-control-xsm[type="file"]::file-selector-button {
    margin-top: -4px;
    margin-bottom: -4px;
    margin-left: -12px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 17.766px;
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
.form-group:has(.form-control-xl) label, .form-group:has(.form-control-xl) .description-text {
    font-size: 17.5px;
    line-height: 28px;
}
.form-group:has(.form-control-xl) .helper-text {
    font-size: 16.1px;
    line-height: 24.15px;
}
.form-group:has(.form-control-lg) label, .form-group:has(.form-control-lg) .description-text {
    font-size: 16.1px;
    line-height: 24.15px;
}
.form-group:has(.form-control-lg) .helper-text {
    font-size: 14.7px;
    line-height: 22.785px;
}
.form-group:has(.form-control-sm) label, .form-group:has(.form-control-sm) .description-text {
    font-size: 12.6px;
    line-height: 17.64px;
}
.form-group:has(.form-control-sm) .helper-text {
    font-size: 11.9px;
    line-height: 15.47px;
}
.form-group:has(.form-control-xsm) label, .form-group:has(.form-control-xsm) .description-text {
    font-size: 11.2px;
    line-height: 14.112px;
}
.form-group:has(.form-control-xsm) .helper-text {
    font-size: 10.64px;
    line-height: 11.704px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to adjust the size of input fields for different use cases.

  • form-control-xl: Extra-large input field for more prominent input areas.
  • form-control-lg: Large input field for better visibility and easier interaction.
  • form-control-sm: Small input field for compact forms or minimal design.
  • form-control-xsm: Extra-small input field for very compact layouts.

These classes help you tailor the input field sizes to suit the design and usability needs of your forms.

Input Type File

<form>
    <input type="file" class="form-control">
</form>
:root {
    --light-base: #f8f8fa;
    --light-active-background: #eeeeee;
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-control[type="file"]::file-selector-button {
    background-color: var(--light-base);
    color: var(--light-input-text-color);
    border-color: var(--light-input-border-color);
    padding-left: 14px;
    padding-right: 14px;
}
.form-control[type="file"]:hover::file-selector-button {
    background-color: var(--light-active-background);
}
.form-control[type="file"]:focus::file-selector-button {
    border-color: var(--light-input-focus-border-color);
}
.form-control[type="file"].form-control-xl[type="file"]::file-selector-button {
    margin-top: -10px;
    margin-bottom: -10px;
    margin-left: -12px;
    padding-left: 18px;
    padding-right: 18px;
    line-height: 41.91px;
}
.form-control[type="file"].form-control-lg[type="file"]::file-selector-button {
    margin-top: -8px;
    margin-bottom: -8px;
    margin-left: -12px;
    padding-left: 16px;
    padding-right: 16px;
    line-height: 29.75px;
}
.form-control[type="file"].form-control-sm[type="file"]::file-selector-button {
    margin-top: -5px;
    margin-bottom: -5px;
    margin-left: -12px;
    padding-left: 12px;
    padding-right: 12px;
    line-height: 23.55px;
}
.form-control[type="file"].form-control-xsm[type="file"]::file-selector-button {
    margin-top: -4px;
    margin-bottom: -4px;
    margin-left: -12px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 17.766px;
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
.form-group:has(.form-control-xl) label, .form-group:has(.form-control-xl) .description-text {
    font-size: 17.5px;
    line-height: 28px;
}
.form-group:has(.form-control-xl) .helper-text {
    font-size: 16.1px;
    line-height: 24.15px;
}
.form-group:has(.form-control-lg) label, .form-group:has(.form-control-lg) .description-text {
    font-size: 16.1px;
    line-height: 24.15px;
}
.form-group:has(.form-control-lg) .helper-text {
    font-size: 14.7px;
    line-height: 22.785px;
}
.form-group:has(.form-control-sm) label, .form-group:has(.form-control-sm) .description-text {
    font-size: 12.6px;
    line-height: 17.64px;
}
.form-group:has(.form-control-sm) .helper-text {
    font-size: 11.9px;
    line-height: 15.47px;
}
.form-group:has(.form-control-xsm) label, .form-group:has(.form-control-xsm) .description-text {
    font-size: 11.2px;
    line-height: 14.112px;
}
.form-group:has(.form-control-xsm) .helper-text {
    font-size: 10.64px;
    line-height: 11.704px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

These classes allow you to control the size of file input fields for different form layouts.

  • form-control-xl: Extra-large file input field for better visibility and larger click area.
  • form-control-lg: Large file input field for comfortable interaction.
  • form-control-sm: Small file input field for compact form designs.
  • form-control-xsm: Extra-small file input field for minimal, space-saving designs.

These classes are ideal for adjusting file input fields to match your form’s design and user experience.

Input Type Color

<form>
    <input type="color" class="form-control">
</form>
:root {
    --light-placeholder: #b4b4b4;
    --light-muted: #8c8c8c;
    --default-input-border-radius: 6px;
    --light-input-text-color: #535353;
    --light-input-background-color: #fff;
    --light-input-border-color: #d2d2d2;
    --light-input-focus-border-color: #6562fb;
    --light-input-focus-shadow: rgba(101, 98, 251, 0.2) 0 0 10px 1px;
    --input-padding: 6px 12px;
}
.form-control:not([type='range']) {
    padding: var(--input-padding);
    background-color: var(--light-input-background-color);
    color: var(--light-input-text-color);
    font-size: 15.4px;
    line-height: 24.64px;
    border-color: var(--light-input-border-color);
    border-radius: var(--default-input-border-radius);
        -webkit-box-shadow: transparent 0 0 0 0;
    box-shadow: transparent 0 0 0 0;
}
.form-control:not([type='range']):focus {
    border-color: var(--light-input-focus-border-color);
    -webkit-box-shadow: var(--light-input-focus-shadow);
    box-shadow: var(--light-input-focus-shadow);
}
.form-control:not([type='range'])::-webkit-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range']):-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::-ms-input-placeholder {
    color: var(--light-placeholder);
}
.form-control:not([type='range'])::placeholder {
    color: var(--light-placeholder);
}
.form-control[type="color"] {
    min-height: 38.63px;
}
.form-control[type="color"]::-webkit-color-swatch {
    border-radius: var(--default-input-border-radius);
    border-color: var(--light-input-border-color);
}
.form-control[type="color"].form-control-xl {
    min-height: 55.91px;
}
.form-control[type="color"].form-control-lg {
    min-height: 47.75px;
}
.form-control[type="color"].form-control-sm {
    min-height: 33.5px;
}
.form-control[type="color"].form-control-xsm {
    min-height: 27.77px;
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
.form-group:has(.form-control-xl) label, .form-group:has(.form-control-xl) .description-text {
    font-size: 17.5px;
    line-height: 28px;
}
.form-group:has(.form-control-xl) .helper-text {
    font-size: 16.1px;
    line-height: 24.15px;
}
.form-group:has(.form-control-lg) label, .form-group:has(.form-control-lg) .description-text {
    font-size: 16.1px;
    line-height: 24.15px;
}
.form-group:has(.form-control-lg) .helper-text {
    font-size: 14.7px;
    line-height: 22.785px;
}
.form-group:has(.form-control-sm) label, .form-group:has(.form-control-sm) .description-text {
    font-size: 12.6px;
    line-height: 17.64px;
}
.form-group:has(.form-control-sm) .helper-text {
    font-size: 11.9px;
    line-height: 15.47px;
}
.form-group:has(.form-control-xsm) label, .form-group:has(.form-control-xsm) .description-text {
    font-size: 11.2px;
    line-height: 14.112px;
}
.form-group:has(.form-control-xsm) .helper-text {
    font-size: 10.64px;
    line-height: 11.704px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

These classes enable you to resize the color input field for various form layouts.

  • form-control-xl: Extra-large color picker for better visibility and easier selection.
  • form-control-lg: Large color picker for a more comfortable and accessible interface.
  • form-control-sm: Small color picker for compact form designs.
  • form-control-xsm: Extra-small color picker for minimal and space-efficient layouts.

These classes allow you to adjust the color input field size to match the design and functionality of your forms.

Input Type Range

<form>
    <input type="range" class="form-control">
</form>
:root {
    --light-primary: #6562fb;
    --light-input-primary-range-thumb-shadow: rgba(255, 255, 255, 0.6) 0px 0px 0px 1px;
    --light-input-primary-range-thumb-hover-shadow: rgba(101, 98, 251, 0.2) 0px 0px 0px 5px;
    --light-input-primary-range-thumb-active-shadow: rgba(101, 98, 251, 0.25) 0px 0px 0px 8px;
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    padding-bottom: 5px;
    font-weight: 500;
}
.form-group:has([required]) label::after {
    content: "*";
    position: relative;
    top: -4px;
    right: -1px;
    color: var(--light-danger-1);
    font-weight: 500;
}
.form-group .helper-text {
    display: block;
    width: 100%;
    color: var(--light-muted);
    font-size: 12.6px;
    line-height: 17.64px;
    -webkit-transition: color var(--transition-theme);
    transition: color var(--transition-theme);
}
.form-group:has(input + .helper-text) .helper-text {
    padding-top: 4px;
}
.form-group:has(.helper-text + input) .helper-text {
    padding-bottom: 4px;
}
.form-group .description-text {
    padding-top: 4px;
    font-size: 14px;
    line-height: 19.6px;
}
.form-control[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    min-height: 10px;
    height: 10px;
    margin-top: 4px;
    margin-bottom: 4px;
    padding: 0px;
    border-radius: 20px;
    background-color: var(--light-primary);
    outline: none;
    border: 0px;
}
.form-control[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--light-primary);
    -webkit-box-shadow: var(--light-input-primary-range-thumb-shadow);
        box-shadow: var(--light-input-primary-range-thumb-shadow);
    cursor: pointer;
}
.form-control[type="range"]::-webkit-slider-thumb:hover {
    -webkit-box-shadow: var(--light-input-primary-range-thumb-hover-shadow);
        box-shadow: var(--light-input-primary-range-thumb-hover-shadow);
}
.form-control[type="range"]::-webkit-slider-thumb:active {
    -webkit-box-shadow: var(--light-input-primary-range-thumb-active-shadow);
        box-shadow: var(--light-input-primary-range-thumb-active-shadow);
}
.form-control[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--light-primary);
    box-shadow: var(--light-input-primary-range-thumb-shadow);
    cursor: pointer;
}
.form-control[type="range"]::-moz-range-thumb:hover {
    box-shadow: var(--light-input-primary-range-thumb-hover-shadow);
}
.form-control[type="range"]::-moz-range-thumb:active {
    box-shadow: var(--light-input-primary-range-thumb-active-shadow);
}
.form-control[type="range"]:focus {
    -webkit-box-shadow: none;
        box-shadow: none;
    border: 0px;
}
.form-control[type="range"].form-control-xl {
    min-height: 14px;
    height: 14px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 0px;
}
.form-control[type="range"].form-control-xl::-webkit-slider-thumb {
    width: 24px;
    height: 24px;
}
.form-control[type="range"].form-control-xl::-moz-range-thumb {
    width: 18px;
    height: 18px;
}
.form-control[type="range"].form-control-lg {
    min-height: 12px;
    height: 12px;
    margin-top: 4.5px;
    margin-bottom: 4.5px;
    padding: 0px;
}
.form-control[type="range"].form-control-lg::-webkit-slider-thumb {
    width: 21px;
    height: 21px;
}
.form-control[type="range"].form-control-lg::-moz-range-thumb {
    width: 21px;
    height: 21px;
}
.form-control[type="range"].form-control-sm {
    min-height: 8px;
    height: 8px;
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 0px;
}
.form-control[type="range"].form-control-sm::-webkit-slider-thumb {
    width: 14px;
    height: 14px;
}
.form-control[type="range"].form-control-sm::-moz-range-thumb {
    width: 14px;
    height: 14px;
}
.form-control[type="range"].form-control-xsm {
    min-height: 6px;
    height: 6px;
    margin-top: 2.5px;
    margin-bottom: 2.5px;
    padding: 0px;
}
.form-control[type="range"].form-control-xsm::-webkit-slider-thumb {
    width: 11px;
    height: 11px;
}
.form-control[type="range"].form-control-xsm::-moz-range-thumb {
    width: 11px;
    height: 11px;
}
.form-group:has(.form-control-xl) label, .form-group:has(.form-control-xl) .description-text {
    font-size: 17.5px;
    line-height: 28px;
}
.form-group:has(.form-control-xl) .helper-text {
    font-size: 16.1px;
    line-height: 24.15px;
}
.form-group:has(.form-control-lg) label, .form-group:has(.form-control-lg) .description-text {
    font-size: 16.1px;
    line-height: 24.15px;
}
.form-group:has(.form-control-lg) .helper-text {
    font-size: 14.7px;
    line-height: 22.785px;
}
.form-group:has(.form-control-sm) label, .form-group:has(.form-control-sm) .description-text {
    font-size: 12.6px;
    line-height: 17.64px;
}
.form-group:has(.form-control-sm) .helper-text {
    font-size: 11.9px;
    line-height: 15.47px;
}
.form-group:has(.form-control-xsm) label, .form-group:has(.form-control-xsm) .description-text {
    font-size: 11.2px;
    line-height: 14.112px;
}
.form-group:has(.form-control-xsm) .helper-text {
    font-size: 10.64px;
    line-height: 11.704px;
}
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

Use these classes to control the size of range (slider) input fields for different layouts.

  • form-control-xl: Extra-large range slider for a prominent and easily adjustable control.
  • form-control-lg: Large range slider for better usability and visibility.
  • form-control-sm: Small range slider for compact designs and minimal layouts.
  • form-control-xsm: Extra-small range slider for space-constrained or minimalistic designs.

These classes allow you to resize range inputs to fit various form designs, ensuring both functionality and visual consistency.