锐客网

  1. 首页 > 睿知 > it技术 > >

页面设计（CSS如何实现复选框（checkbox）（））

IT知识前端开发创建透明边框页面设计materialize.复选框

Materialize提供了一个复选框功能, 用于为网站创建样式化的复选框。标准HTML复选框是普通的, 带有未选中的简单黑色边框和处于选中状态的刻度线, 但是带有实体化边框的样式可以与刻度线一起更改。
【页面设计（CSS如何实现复选框（checkbox）（））】要使用默认样式创建复选框, < 输入类型="复选框"> 用来。的对于属性是将自定义复选框与输入绑定所必需的。这是通过将输入的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如何实现复选框（checkbox）（））

文章图片

    推荐阅读


    上一篇：CSS伪元素用法解析和代码示例

    下一篇：使用get方法导航链接– Selenium Python