Skip to content
Related Articles

Related Articles

Bulma Input Variables

View Discussion
Improve Article
Save Article
  • Last Updated : 01 Aug, 2022
View Discussion
Improve Article
Save Article

Bulma is a free, open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

Bulma input variables are the SCSS variables that are compiled to CSS, which in turn, are utilized to add styling in various customization options. These variables are declared once to store data that can be reused whenever required. In case the variables are modified once then the changes will be reflected wherever the variable is utilized, and they are used to make modifications to the input for example changing the color of the border or changing the color of the input. 

Syntax:

$property-name:$prop

Bulma input variables:

Name Description     Type Value Computed Value Computed Type
$input-color This variable is used to provide color to the input. variable           $grey-darker hsl(0, 0%, 21%) color
$input-background-color This variable is used to provide background color to the input. variable $white hsl(0, 0%, 100%) color
$input-border-color This variable is used to provide color to the border of the input. variable $grey-lighter hsl(0, 0%, 86%) color
$input-shadow This variable is used to provide shadow to the input. size inset 0 1px 2px rgba($black, 0.1)    
$input-hover-color This variable is used to provide color to the input on hover. variable $grey-darker hsl(0, 0%, 21%) color
$input-hover-border-color This variable is used to provide the border color of the input on hover. variable $grey-light hsl(0, 0%, 71%) color
$input-focus-color This variable is used to provide color to the focus of the input. variable $grey-darker hsl(0, 0%, 21%) color
$input-focus-border-color This variable is used to provide border color to the focus of the input variable $link hsl(217, 71%,  53%) color
$input-focus-box-shadow-size This variable is used to define the size of the box-shadow. size 0 0 0 0.125em    
$input-focus-box-shadow-color This variable is used to provide color to the shadow of the box. color rgba($link, 0.25)    
$input-disabled-color This variable is used to provide color to disabled input. variable $text-light hsl(0, 0%, 48%) color
$input-disabled-background-color This variable is used to background color the disabled input. variable $background hsl(0, 0%, 96%) color
$input-disabled-border-color This variable is used to provide color to the border of the disabled input. variable $background hsl(0, 0%, 96%) color
$input-arrow This variable is used to provide an arrow effect in input. variable $link hsl(217, 71%,  53%) color
$input-icon-color This variable is used to provide color to the icon of the input. variable $grey-lighter hsl(0, 0%, 86%) color
$input-icon-active-color This variable is used to provide color to the active icon input. variable $grey hsl(0, 0%, 48%) color
$input-radius This variable is used to provide a radius to the input. variable $radius 4px size

Example 1: In the following code, we will make use of the above variable to demonstrate the use of input.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Variable</title>
    <link rel='stylesheet' href=
  
    <!-- font-awesome cdn -->
    <script src=
    </script>
    <link rel="stylesheet" href="style.css">
  
    <style>
        .title {
            color: green;
        }
  
        nav {
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
  
</head>
  
<body>
    <h1 class="title has-text-centered">
        GeekforGeeks
    </h1>
    <h3 class="subtitle has-text-centered">
        A computer science portal for geeks.
    </h3><br>
  
    <div class='container'>
        <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
                <div class="field">
                    <div class="control">
                        <input class="input" 
                            type="text" 
                            placeholder='GeeksforGeeks'>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


SCSS Code: 

$input-background-color: lightgreen;
.input{
    color:$input-background-color;
}

Compiled CSS Code:

.input {
    color: lightgreen; 
}

Output:

 

Example 2: In the following code, we will make use of the above variable to demonstrate the use of input.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bulma Variable</title>
    <link rel='stylesheet' href=
  
    <!-- font-awesome cdn -->
    <script src=
    </script>
    <link rel="stylesheet" href="style.css">
  
    <style>
        .title {
            color: green;
        }
  
        nav {
            margin-left: 200px;
            margin-right: 200px;
        }
    </style>
</head>
  
<body>
    <h1 class="title has-text-centered">
        GeekforGeeks
    </h1>
    <h3 class="subtitle has-text-centered">
        A computer science portal for geeks.
    </h3><br>
  
    <div class='container'>
        <div class='columns is-mobile is-centered'>
            <div class='column is-5'>
                <div class="field">
                    <div class="control">
                        <input class="input " 
                            type="text" 
                            placeholder="GeekforGeeks">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
  
</html>


SCSS Code:

$input-border-color: 2px solid green;
.input{
    border:$input-border-color;
}

Compiled CSS Code:

.input {
    border: 2px solid green; 
}

Output:

 

Reference: https://bulma.io/documentation/form/input/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!