Blaze UI Input Colors

Last Updated : 06 May, 2022

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

Blaze UI Input Colors is used to create the input fields with different colors. We have two color classes and one attribute as shown below.

Blaze UI Input Colors Classes and Attribute:

c-field–success: This class is used to create the success color input field.
c-field–error: This class is used to create the error color input field.
disabled: This attribute is used to create the disabled input field.

Syntax:

<input class="c-field Input-Colors-Class" 
       placeholder="..." type="text">

Example 1: The following code demonstrates the Blaze UI Input Colors.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Input Colors </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body class="u-window-box-large"> 
    <div class="u-centered "> 
        <h1 style="color: green;">  
            GeeksforGeeks  
        </h1> 
        <h3>  
            Blaze UI Input Colors  
        </h3> 
  
        <input class="c-field c-field--success" 
               placeholder="GeeksforGeeks success color" 
               type="text"> 
        <br> 
  
        <input class="c-field c-field--error" 
               placeholder="GeeksforGeeks error color" 
               type="text"> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Input Colors

Example 2: The following code demonstrates the Blaze UI Input Colors.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Input Colors </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body class="u-window-box-large"> 
    <div class="u-centered "> 
        <h1 style="color: green;">  
            GeeksforGeeks  
        </h1> 
        <h3>  
            Blaze UI Input Colors  
        </h3> 
  
        <input class="c-field c-field--success" 
               placeholder="GeeksforGeeks success color disabled" 
               disabled type="text"> 
        <br> 
  
        <input class="c-field c-field--error" 
               placeholder="GeeksforGeeks error color disabled" 
               disabled type="text"> 
    </div> 
</body> 
  
</html>