Open In App

Primer CSS Select menu Borderless

Improve
Improve
Like Article
Like
Save
Share
Report

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 Select Menu that has superior assistance for filtering, navigation, and so on. In this article, we will discuss the Select menu Borderless. Select Menu Borderless uses SelectMenu-list–borderless class to remove the borders among different list items.

Primer CSS Borderless class:

  • SelectMenu-list–borderless: This class is used to remove borders among different list items.

Syntax:

<details class="details-reset details-overlay">
  <summary class="btn" aria-haspopup="true">
    ...
  </summary>
  <div class="SelectMenu">
    <div class="SelectMenu-modal">
      <div class="SelectMenu-list SelectMenu-list--borderless">
        <button class="SelectMenu-item" role="menuitem">...</button>
        ...
      </div>
    </div>
  </div>
</details>

Example 1: Below example illustrates the use of Primer CSS Borderless using SelectMenu-list–borderless class.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Primer CSS Select Menu Borderless </title>
  <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body style="margin-inline: 10rem;">
  <div class="mt-5">
    <h1 class="color-fg-success"> GeeksforGeeks </h1>
    <h3> Primer CSS Select Menu Borderless </h3>
      
    <details class="details-reset details-overlay mt-3">
      <summary class="btn" aria-haspopup="true">
        Choose any course
      </summary>
      <div class="SelectMenu ">
        <div class="SelectMenu-modal">
          <div class="SelectMenu-list 
             SelectMenu-list--borderless">
            <button class="SelectMenu-item" 
              role="menuitem">
              DSA
            </button>
            <button class="SelectMenu-item" 
              role="menuitem">
              Operating System
            </button>
            <button class="SelectMenu-item" 
              role="menuitem">
              DBMS
            </button>
          </div>
        </div>
      </div>
    </details>
  </div>
</body>
  
</html>


Output:

Primer CSS Select Menu Borderless 

Example 2: Below example illustrates the use of Primer CSS Borderless without using SelectMenu-list–borderless class.

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title> Primer CSS Select Menu Borderless </title>
  <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>
  
<body style="margin-inline: 10rem;">
  <div class="mt-5">
    <h1 class="color-fg-success"> GeeksforGeeks </h1>
    <h3> Primer CSS Select Menu Borderless </h3>
      
    <details class="details-reset details-overlay mt-3">
      <summary class="btn" aria-haspopup="true">
        Choose any course
      </summary>
        
      <div class="SelectMenu ">
        <div class="SelectMenu-modal">
          <div class="SelectMenu-list">
            <button class="SelectMenu-item" 
              role="menuitem">
              DSA
            </button>
            <button class="SelectMenu-item" 
              role="menuitem">
              Operating System
            </button>
            <button class="SelectMenu-item" 
              role="menuitem">
              DBMS
            </button>
          </div>
        </div>
      </div>
    </details>
  </div>
</body>
  
</html>


Output:

Primer CSS Select Menu Borderless 

Reference: https://primer.style/css/components/select-menu#borderless 



Last Updated : 21 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads