页面设计:CSS如何实现复选框(checkbox)?

2021年3月12日13:38:33 发表评论 863 次浏览

Materialize提供了一个复选框功能, 用于为网站创建样式化的复选框。标准HTML复选框是普通的, 带有未选中的简单黑色边框和处于选中状态的刻度线, 但是带有实体化边框的样式可以与刻度线一起更改。

要使用默认样式创建复选框, <输入类型="复选框">用来。的对于属性是将自定义复选框与输入绑定所必需的。这是通过将输入的ID添加为标签属性的值来完成的。下面的示例显示了实现形式中使用的所有不同类型的复选框。

例子:

<!DOCTYPE html>
< html >
     < head >
         <!--Import Google Icon Font-->
         < link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
               rel = "stylesheet" />
  
         <!-- Compiled and minified CSS -->
         < link rel = "stylesheet" 
               href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" />
         < script type = "text/javascript" 
                 src =
"https://code.jquery.com/jquery-2.1.1.min.js" ></ script >
         < script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js" >
       </ script >
  
         <!--Let browser know website 
           is optimized for mobile-->
         < meta name = "viewport" 
               content=" width = device -width, initial-scale = 1 .0" />
     </ head >
  
     < body class = "container" >
         < div class = "intro-text" >
             < h3 >Checkbox with Materialize CSS</ h3 >
  
             < form action = "#" >
                 < p >
                     < input type = "checkbox"
                            id = "test1" />
                     < label for = "test1" >First Option</ label >
                 </ p >
                 < p >
                     < input type = "checkbox" 
                            id = "test2" 
                            checked = "checked" />
                     < label for = "test2" >Checked Option</ label >
                 </ p >
                 < p >
                     < input type = "checkbox"
                            class = "filled-in"
                            id = "filled-in-box"
                            checked = "checked" />
                     < label for = "filled-in-box" >
                       Filled in</ label >
                 </ p >
                 < p >
                     < input id = "indeterminate-checkbox"
                            type = "checkbox" />
                     < label for = "indeterminate-checkbox" >
                       Indeterminate Style</ label >
                 </ p >
  
                 < p >
                     < input type = "checkbox"
                            id = "test3" 
                            checked = "checked" 
                            disabled = "disabled" />
                     < label for = "test3" >
                       Disabled Ckeched</ label >
                 </ p >
                 < p >
                     < input type = "checkbox"
                            id = "test4"
                            disabled = "disabled" />
                     < label for = "test4" >Disabled</ label >
                 </ p >
             </ form >
         </ div >
         <!-- Compiled and minified JavaScript -->
         < script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" >
       </ script >
     </ body >
</ html >

输出如下:

实现CSS复选框1

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: