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 States are used to set the different states of input fields. There are many different states available for input fields that are – normal, hovered, focused, loading, static, disabled, and readonly. You can set the input states using the classes provided by Bulma.
Bulma Input States Classes:
- is-hovered: It is used to create hovered input field. This class is used with input class.
- is-focused: It is used to create focused input field. This class is used with input class.
- is-loading: It is used to create loading input field. This class is used with control class container.
- is-static: It is used to remove the background, border, shadow, and horizontal padding, while maintaining the vertical spacing so you can easily align the input in any context, like a horizontal form.
Note: We can resize the loading snipers by adding is-small, is-medium or is-large to the control container.
Syntax:
<input class="input input States Class">
Disabled State: We will use HTML disabled attribute to disable the input field.
Readonly and static inputs: We will use HTML readonly attribute to make the input field non-editable.
Example:
<!DOCTYPE html> <html>
<head>
<title>Bulma Input States</title>
<link rel='stylesheet' href=
</head>
<body class="has-text-centered">
<h1 class="is-size-1 has-text-success">
GeeksforGeeks
</h1>
<p class="is-size-3">Bulma Input States</p>
<div class="container">
<div class="control">
<input class="input" type="text" placeholder="Normal input field">
<br><br>
<input class="input is-hovered" type="text" placeholder="Hovered input field">
<br><br>
<input class="input is-focused" type="text" placeholder="Focused input field">
<br><br>
<input class="input" type="text" placeholder="Disabled input field" disabled>
<br><br>
<input class="input is-static" type="text" value="Static input field" readonly>
<br><br>
</div>
<div class="control is-loading">
<input class="input" type="text" placeholder="Loading input field">
</div>
</div>
</body>
</html>
|
Output:
Bulma Input States
Reference: https://bulma.io/documentation/form/input/#states