Skip to content
Related Articles
Open in App
Not now

Related Articles

Primer CSS Customization Forms

Improve Article
Save Article
  • Last Updated : 20 Apr, 2022
Improve Article
Save Article

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">
            GeeksforGeeks
        </h1>
          
        <h3>Primer CSS Customization Forms</h3>
  
        <form>
            <input class="form-control input-contrast" 
                type="number" 
                placeholder="GeeksforGeeks 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">GeeksforGeeks</h1>
        <h3>Primer CSS Customization Forms</h3>
          
        <form>
          <input class="form-control" type="email" 
            placeholder="Disabled GeeksforGeeks" disabled />
        </form>
    </center>
</body>
  
</html>


Output:

Primer CSS Customization Forms

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!