checkbox样式 | 易学教程

HTML学习笔记二20200310

阅读更多关于 HTML学习笔记二20200310

接着昨天的写了甩个链接 HTML学习笔记一昨天的状态是这个样子的 < link href = "https://fonts.googleapis.com/css?family=Lobster" rel = "stylesheet" type = "text/css" > < style > . red - text { color : red ; } h2 { font - family : Lobster , Monospace ; } p { font - size : 16 px ; font - family : Monospace ; } . thick - green - border { border - color : green ; border - width : 10 px ; border - style : solid ; border - radius : 50 % ; } . smaller - image { width : 100 px ; } < / style > < h2 class = "red-text" > CatPhotoApp < / h2 > < p > Click here for < a href = "#" > cat photos < / a > . < / p > < a href = "#" > < img

标签模拟多选择框checkbox

阅读更多关于标签模拟多选择框checkbox

用label标签模拟checkbox选择框，贴出关键代码如下：（具体样式还需自己调整一下）我的效果·：多个选项框设置一样，改变下input输入框的calss名与label名即可， HTML代码： <div class="hander"> <input type="checkbox" name="favorite" value="1" id="color-input-red" class="color-input-red"/> <label for="color-input-red"></label> <span>手袋</span> </div> CSS代码： #color-input-red +label{ display: block; width:0.22rem; height:0.22rem; cursor: pointer; position: absolute; top: 0.09rem; left: 0; border: 1px solid #cccccc; } #color-input-red:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size:0.16rem; line-height: 0.20rem; color: #000000; }/

第九章：小程序表单与医疗急救卡（上）

阅读更多关于第九章：小程序表单与医疗急救卡（上）

作者：知晓云 - 小程序开发快人一步来源：知晓课堂医疗急救卡小程序是什么？该小程序主要为一个表单的填写与提交。示例表单的内容包括姓名、性别、血型、医疗情况、服药情况、是否为器官捐献者和紧急联系人电话号码。提交成功后表单显示用户已填写的信息，如果用户想更新，直接更改表单内容再次提交即可。我们所用到的组件和 API 所需组件表单：form，将组件内用户输入的 <input/> <switch/> <radio> 等提交；按钮：button，用以提交表单等；输入框：input，用户输入姓名和紧急联系人电话号码；单项选择器：radio-group 和 radio，用户选择性别；从底部弹起的滚动选择器：picker，用户选择血型；多项选择器：checkbox-group 和 checkbox，用户选择医疗情况；多行输入框：textarea，用户输入自身服药情况；开关选择器：switch，用户选择是否为器官捐献者。所需 API wx.showToast: 显示消息提示框，当用户提交表单后，给予成功或失败提示； wx.makePhoneCall: 拨打紧急联系人电话。上手开发卡片展示页面首次使用小程序，页面将显示一个「创建医疗急救卡」的按钮，效果图如下：点击该按钮后显示表单，效果图如下：当用户提交过表单后，按钮 “提交” 变为 “更新”

H-ui前端框架

阅读更多关于 H-ui前端框架

按钮不支持圆角和背景渐变浏览器，如IE系列，会显示扁平纯色直角效果。 HTML代码 <input class="btn btn-default" type="button" value="默认"> <input class="btn btn-default radius" type="button" value="圆角效果"> <input class="btn btn-default round" type="button" value="椭圆效果"> <input class="btn btn-primary radius" type="button" value="主要"> <input class="btn radius btn-secondary" type="button" value="次要"> <input class="btn btn-success radius" type="button" value="成功"> <input class="btn radius btn-warning" type="button" value="警告"> <input class="btn btn-danger radius" type="button" value="危险"> <input class="btn btn-link radius" type="button"

jQuery

阅读更多关于 jQuery

介绍 /*--> */ /*--> */ jQuery是一个javascript库，核心理念是write less,do more(写得更少,做得更多)，他内部帮我们把几乎所有功能都做了封装，相比上一节基于DOM、BOM操作会更加简单。例如：根据ID选择标签 // DOM 选择 document.getElementById('item'); // jQuery 选择 $('#item'); 快速应用在使用jQuery时，需要提前下载并应用jQuery之后，才能在代码中使用。下载jQuery http://jquery.com/download/ 应用jQuery <!DOCTYPE html> <html> <head> <meta charset='utf-8'/> <title>jQuery学习</title> <style> </style> </head> <body> <div id="item">Hello world <div>我是item的子标签</div> </div>  <script type="text/javascript" src="../js/jquery.js"></script> <script type="text/javascript"> // 获取标签文本内容 var tar = $('#item')

checkbox自定义样式

阅读更多关于 checkbox自定义样式

<div class="form-table-left" style="width: 100%;"> <span class="span-left">本人承诺提供的信息、材料均合法、真实、有效</span> <span class="span-left checkBox"> <input type="checkBox" name="type" id="adviceRadio1" value="1" checked hidden/> <label for="adviceRadio1" class="advice"></label> </span> </div> .advice{ width: 15px; height: 15px; display: inline-block; background: url('../../assets/images/checkbox-no.png') no-repeat center; vertical-align: middle; margin-top: -4px; } input[type="checkBox"]:checked + .advice{ background-image: url('../../assets/images/checkbox-yes.png'); } 转载： https://www.cnblogs.com/fozero

Bootstrap之表单

阅读更多关于 Bootstrap之表单

基础表单表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。当然表单除了这几个元素之外，还有 input 、 select 、 textarea 等元素，在Bootstrap框架中，通过定制了一个类名` form-control `，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。 1、宽度变成了100% 2、设置了一个浅灰色（#ccc）的边框 3、具有4px的圆角 4、设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化 5、设置了placeholder的颜色为#999 注意：类名“ .form-control ”是添加在 input、select上面的。只控制输入框的样式。注意：当 input 的类型是 checkbox 或者 radio 时，<label> 是包裹住了 <input> 的>。水平表单 Bootstrap框架默认的表单是垂直显示风格，但很多时候我们需要的水平表单风格（标签居左，表单控件居右）见下图。 <form class="form-horizontal" role="form"> <div class="form-group"> <label for="inputEmail3" class="col-sm-2 control-label"

checkbox 样式重写

阅读更多关于 checkbox 样式重写

css样式 .me-checkbox:checked { background: #1673ff 　　　　　} .me-checkbox { outline: none;/*轮廓*/ width: 25px; height: 25px; background-color: #ffffff; border: solid 1px #dddddd; /* -webkit-border-radius:50%; */ border-radius: 50%; font-size: 0.8rem; margin: 0; padding: 0; position: relative; display: inline-block; vertical-align: top; -webkit-appearance: button; /*让元素看的像一个button*/ -webkit-user-select: none; /*让元素无法选择*/ user-select: none; -webkit-transition: background-color ease 0.1s; transition: background-color ease 0.1s; } .me-checkbox:checked::after {/*这个是划勾*/ content: ''; top: 5px; left: 5px;

前端-JQuery

阅读更多关于前端-JQuery

jQuery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫

如何编写轻量级 CSS 框架

阅读更多关于如何编写轻量级 CSS 框架

Github: https://github.com/nzbin/snack Docs: https://nzbin.github.io/snack 前言这篇文章我已经酝酿了半年之久，或者说拖沓了这么久吧。想说的东西很多，却又无从说起。如今轻量级框架如雨后春笋，层出不穷。我想每个人都应该归纳总结工作中的常见需求，编写一套适合自己的 CSS 框架。在之前的文章中，我提到了面向对象的 CSS（比如 BEM、OOCSS、SMACSS ，详见 http://vanseodesign.com/css/dry-principles/ ）。这是一种思想，并不涉及具体的 CSS 问题，主要是类命名的策略！现在仍然有很多人对于前端框架的认识还停留在表面，认为 Bootstrap 是后端人员专用，前端没必要等等。我不知道这种说法从何而来，我最开始也不喜欢使用框架，或许和很多人的想法一样，畏惧新知识、害怕难以驾驭、遇到问题的时候无法解决等等。最关键的一点是很多人认为框架的样式是固定的，修改起来太麻烦，还不如自己根据设计图写起来方便。为什么使用框架为什么使用框架？答案显而易见，效率。除此之外，使用框架或者研究框架的意义还有很多，比如面向对象思想的具体实现。在上一家公司工作的时候，开始的几个项目我也是用最原始的方法书写 CSS 。项目之中最让我头疼的就是类的命名。我想大多数人都是根据功能去命名

订阅 checkbox样式