Primer CSS Customization Forms

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS offers Forms that can be customized using various classes like input-contrast, and disabled. In this article, we will discuss Primer CSS Customization Forms along with examples.

Primer CSS Customization Forms Class:

input-contrast: This class is used to add grey background contrast to the input field.

Primer CSS Customization Forms Attribute:

disabled: This attribute is used to disable the input field.

Syntax:

<form>
      <input class="form-control input-contrast" 
          type="text" disabled 
      />
</form>

Example 1: This example demonstrates the use of Primer CSS Customization Forms using the input-contrast class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Primer CSS Customization Forms</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green"> 
            w3wiki 
        </h1> 
          
        <h3>Primer CSS Customization Forms</h3> 
  
        <form> 
            <input class="form-control input-contrast" 
                type="number" 
                placeholder="w3wiki contrast" /> 
        </form> 
    </center> 
</body> 
  
</html>

Output:

Primer CSS Customization Forms

Example 2: This example demonstrates the use of Primer CSS Customization Forms using the disabled attribute.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Primer CSS Customization Forms</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">w3wiki</h1> 
        <h3>Primer CSS Customization Forms</h3> 
          
        <form> 
          <input class="form-control" type="email" 
            placeholder="Disabled w3wiki" disabled /> 
        </form> 
    </center> 
</body> 
  
</html>

Output:

Primer CSS Customization Forms

Reference: https://primer.style/css/components/forms#customization

HTML

HTML

Contact Us