Open In App

Primer CSS Selected state

Last Updated : 20 Apr, 2022
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. In this article, we will discuss Primer CSS Selected state.

The selected state is used to indicate that the select menu item is been selected and it is shown with a check icon when the aria-checked=”true” attribute is set.

Primer CSS Selected state classes:

  • SelectMenu-icon: This class is used to define any select menu icon. 
  • SelectMenu-icon–check: This class is used to indicate a check icon when the aria-checked=”true” attribute is set.

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">
                 <button class="SelectMenu-item" 
                     aria-checked="true">
                     <svg class="SelectMenu-icon 
                         SelectMenu-icon--check
                         octicon octicon-check" width="..." height="..." 
                         viewBox="..."><path d="..."/>
                     </svg>
                   ...
                 </button>
             </div>
         </div>
     </div>
</details>

Example 1: This example demonstrates the use of the select menu selected state in Primer CSS.  

HTML




<!DOCTYPE html>
<html>
  
<head>
  <title>Primer CSS Selected state</title>
  <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" />
</head>
  
<body>
    <div class="pl-12" >
        <h1 style="color:green">GeeksforGeeks</h1>
        <h3>Primer CSS Selected state</h3>
          
        <details class="details-reset details-overlay mt-3">
            <summary class="btn" aria-haspopup="true">
                Choose any course from GeeksforGeeks
            </summary>
  
            <div class="SelectMenu">
                <div class="SelectMenu-modal">
                    <div class="SelectMenu-list">
                        <button class="SelectMenu-item" aria-checked="true">
                          <svg class="SelectMenu-icon SelectMenu-icon--check 
                             octicon octicon-check" width="20" height="20" viewBox="0 0 150 150">
                            <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22,
                              11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57,
                              68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0,
                              1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z"
                            />
                          </svg>
                          Data Structure
                        </button>
  
                        <button class="SelectMenu-item">
                          <svg class="SelectMenu-icon SelectMenu-icon--check
                             octicon octicon-check" width="20" height="20" viewBox="0 0 150 150">
                            <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22,
                              11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57,
                              68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0,
                              1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z"
                            />
                          </svg>
                          Interview Preparation
                        </button>
  
                        <button class="SelectMenu-item">
                          <svg class="SelectMenu-icon SelectMenu-icon--check
                             octicon octicon-check" width="20" height="20" viewBox="0 0 150 150">
                            <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22,
                              11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57,
                              68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0,
                              1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z"
                            />
                          </svg>
                          DBMS
                        </button>
  
                        <button class="SelectMenu-item" aria-checked="true">
                          <svg class="SelectMenu-icon SelectMenu-icon--check
                             octicon octicon-check" width="20" height="20" viewBox="0 0 150 150">
                            <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22,
                              11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57,
                              68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0,
                              1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z"
                            />
                          </svg>
                          Operating System
                        </button>
                    </div>
                </div>
            </div>
        </details>
    </div>
</body>
  
</html>
 






                        










Output:


Primer CSS Selected state


Example 2: This is another example that demonstrates the use of Primer CSS Selected State.




HTML














                                    




                                    

                                    




                                    




                                    

                                    

                                    
                                




















<!DOCTYPE html> 


<html> 


  


<head> 


  <title>Primer CSS Selected state</title> 


  <link rel="stylesheet" href= 


"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> 


</head> 


  


<body> 


    <div class="pl-12" > 


        <h1 style="color:green">GeeksforGeeks</h1> 


        <h3>Primer CSS Selected state</h3> 


          


        <details class="details-reset details-overlay mt-3"> 


            <summary class="btn" aria-haspopup="true"> 


                Choose any event at GeeksforGeeks 


            </summary> 


  


            <div class="SelectMenu"> 


                <div class="SelectMenu-modal"> 


                    <div class="SelectMenu-list"> 


                        <button class="SelectMenu-item"> 


                          <svg class="SelectMenu-icon SelectMenu-icon--check  


                             octicon octicon-check" width="20" height="20" viewBox="0 0 150 150"> 


                            <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22, 


                              11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57, 


                              68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0, 


                              1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z" 


                            /> 


                          </svg> 


                          Get Hired with GeeksforGeeks at SuperK 


                        </button> 


  


                        <button class="SelectMenu-item"> 


                          <svg class="SelectMenu-icon SelectMenu-icon--check 


                             octicon octicon-check" width="20" height="20" viewBox="0 0 150 150"> 


                            <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22, 


                              11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57, 


                              68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0, 


                              1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z" 


                            /> 


                          </svg> 


                          Interview Series #46 


                        </button> 


  


                        <button class="SelectMenu-item" aria-checked="true"> 


                          <svg class="SelectMenu-icon SelectMenu-icon--check 


                             octicon octicon-check" width="20" height="20" viewBox="0 0 150 150"> 


                            <path d="M4.82,69.68c-14.89-16,8-39.87,24.52-24.76,5.83,5.32,12.22, 


                              11,18.11,16.27L92.81,5.46c15.79-16.33,40.72,7.65,25.13,24.07l-57, 


                              68A17.49,17.49,0,0,1,48.26,103a16.94,16.94,0,0, 


                              1-11.58-4.39c-9.74-9.1-21.74-20.32-31.86-28.9Z" 


                            /> 


                          </svg> 


                          Interview Series #46 


                        </button> 


                    </div> 


                </div> 


            </div> 


        </details> 


    </div> 


</body> 


  


</html>



















                        







                        










Output:


Primer CSS Selected state


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


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Primer CSS States
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Using Primer CSS - A Simple and Transparent CSS Library for Web Development
            

        
    
        
            

                How to change the color of selected text using CSS ?
            

        
    
        
            

                Pure CSS Selected and Disabled Items
            

        
    
        
            

                How to style label associated with selected radio input and checked checkboxes using CSS ?
            

        
    
        
            

                How to Change Selected Text Background Color in CSS?
            

        
    
        
            

                Primer CSS Spacing
            

        
    
        
            

                Primer CSS Flexbox Align Items
            

        
    
        
            

                Primer CSS Grow x Animation
            

        
    
        
            

                Primer CSS Progress with multiple values
            

        
    
        
            

                Primer CSS Labels Modifiers
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
S

        

            
        

        

                                    


                                    

                                        singhtripti                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox