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.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Variable</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</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.
<!DOCTYPE html>
<html>
<head>
<title>Bulma Variable</title>
<link rel='stylesheet' href=
'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css'>
<!-- font-awesome cdn -->
<script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
</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/