自定义表单

开发工具与关键技术：VS form
作者：微凉之夏
撰写日期：2019年07月03日

为了使用自定义表单和跨浏览器保持一致性，请使用自定义的表单元素来替换浏览器的默认值，它们建立在语义和具备有了的标记之上，因此它们是可以替代任何默认表单的控制元件的，首先有复选框和单选框的自定义：每个选取块和选项按钮被包在一个标签中，因为理由有三种，如下：
1、 这样的话能提供更大的点击区域。
2、 这样的话能提供一个更加有意义的语义容器，以帮助我们替换默认的标签组件。
3、 这样的话自动触发标签的状态，省去引用JavaScript插件。
我们使用opacity隐藏默认的并使用.custom-control-indicator在它的位置之上构建一个全新的表单指示器，遗憾的是，由于css的content对该元素不起作用，所以我们不能仅使用标签构建一个自定义事件，我们使用(~)css兄弟选择器来为标签来处理样式和状态，就像：checked自定义窗体指示符一样，当与.Custom-control-description结合使用，也可以根据状态对每个对象进行样式调整（例如：input标签的对象属性有autocomplete 是指设置或返回email字段的autocomplete属性值、autofocus 是指设置或返回input image 在页面加载后是否自动获取焦点、defaultValue 是指默认值、disabled 是指是否被禁用、 from是指表单的引用等等）在检查状态下，我们使用open lconic的base64 embedded SVG icons图标，提供跨浏览器和样式设计的最佳控制器。
Checkbox 勾选框 （检查这个自定义复选框） 如下：


通过JavaScript(当没有可用的HTML属性来指定它) 手机设置时，自定义勾选控件还可以使用:indeterminate 伪类（实现一种模糊的提示使用的样式）。
单选项 如下：


上面代码图中第一和第三方框中是用来通过添加.form-check-inline到任何一组，会使加到任何.form-check中的选取框平行排列，如果不添加.form-check-inline的话它就会垂直排列了，而第二和第四则是如果你不把name值设置为一致的话那么它会出现以下情况：

它就会不再是单选框了而是复选框了，同样的如果有三个选择的话当你每个选项都选择的话也会每个都会选中，所以再这里提醒大家一定要注意下name值是否一致，自定义单选框和多选框也可以禁用，只要将disabled 布尔值属性加入到 标签中，禁用的指示和样式都会自动载入，如下：