如何使用 HTML 和 CSS 创建切换开关？

要创建切换开关，我们将使用 HTML 和 CSS。如果你想添加一个更吸引人的拨动开关，那么你可以添加滑动动画、弹跳效果等。在本文中，我们将把整个事情分成两个不同的部分结构创建和设计结构。

创建结构：在本节中，我们将为切换按钮创建一个基本结构。在这里，我们只需要在 HTML 文档中放置一个复选框和一个标签即可，如下所示。我们可以通过使用HTML 标签标签和HTML input type = checkbox 来做到这一点。

• HTML 代码： HTML 代码用于创建拨动开关的结构。由于它不包含 CSS，所以它只是一个简单的结构。我们将使用一些 CSS 属性使其具有吸引力的响应。

HTML

    

    

  

    
        
GeeksforGeeks
        Toggle switch with HTML and CSS
        


        
        
            
OFF    ON
        
    

  

设计结构：在上一节中，我们已经创建了拨动开关的结构。我们将在本节中设计开关并使其具有响应性。

• CSS 代码： CSS 代码用于制作有吸引力的 HTML 组件。此 CSS 属性用于在切换开关上制作样式。

CSS

结合 HTML 和 CSS 代码：这是上述两部分组合的最终代码。它将显示切换开关。

HTML

    

    
      
    

  

    
        
GeeksforGeeks
        Toggle switch with HTML and CSS
        


        
        
            
OFF    ON
        
    

  

输出：