📌  相关文章
📜  如何使用 HTML 和 CSS 创建切换开关?

📅  最后修改于: 2021-09-01 02:38:00             🧑  作者: Mango

拨动开关

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

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

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


    

    toggle switch

  

    
        

GeeksforGeeks

        Toggle switch with HTML and CSS         

                      
  


CSS


HTML


    

    toggle switch
      
    

  

    
        

GeeksforGeeks

        Toggle switch with HTML and CSS         

                      
  


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

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

CSS


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

HTML



    

    toggle switch
      
    

  

    
        

GeeksforGeeks

        Toggle switch with HTML and CSS         

                      
  

输出: