修改复选框默认样式

dendoink 发布于2019-08-28 17:59 / 1206人阅读

摘要：我们都知道表单的复选框是有默认样式的，这里就不贴图了，如果希望把复选框样式修改美观一些呢为如下图所示实现方法用标签关联复选框，把复选框设置为透明，然后给加样式，并加入点击事件改变背景图片。部分红烧肉价格需要引用

我们都知道表单的复选框是有默认样式的，这里就不贴图了，
如果希望把复选框样式修改美观一些呢？为如下图所示：

实现方法：用label标签关联复选框，把复选框设置为透明（opacity:0;），
然后给label加background样式，并加入点击事件改变背景图片。
html部分：

css:

.selectBtn {
  opacity: 0;
  position: absolute;
  right: 5px;
  top: 35%;
}
.formycheckbox {
  position: absolute;
  right: 20px;
  top: 35%;
  width: 28px;
  height: 28px;
  background: url("unchoosen.png") no-repeat;
  background-size: cover;
}
.selected {
  position: absolute;
  right: 20px;
  top: 35%;
  width: 28px;
  height: 28px;
  background: url(choosen.png) no-repeat;
  background-size: cover;
}

javascript:

//需要引用jQuery

云服务器 GPU云服务器默认选中复选框默认样式修改样式修改默认端口自

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110942.html

修改复选框默认样式

摘要：我们都知道表单的复选框是有默认样式的，这里就不贴图了，如果希望把复选框样式修改美观一些呢为如下图所示实现方法用标签关联复选框，把复选框设置为透明，然后给加样式，并加入点击事件改变背景图片。部分红烧肉价格需要引用我们都知道表单的复选框是有默认样式的，这里就不贴图了，如果希望把复选框样式修改美观一些呢？为如下图所示：showImg(https://segmentfault.com/im...

浠ラ箍 2019-08-01 14:41 评论0 收藏0
总结：如何修改美化radio、checkbox的默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改样式的方法。它使用纯编写，没有任何的文件。现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或inp...

asce1885 2019-08-02 12:09 评论0 收藏0
总结：如何修改美化radio、checkbox的默认样式

摘要：现在前端页面效果日益丰富，默认的组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改样式的方法。它使用纯编写，没有任何的文件。现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或inp...

Anshiii 2019-08-29 17:26 评论0 收藏0
HTML表单元素及CSS

摘要：表单一介绍标签表示为表单，表单元素是允许用户在表单中输入内容。属性值被提交表单的类型二表单组件组件一般被定义在表单中标签中标签表示输入框，为空标签。属性，属性规定要显示的元素的类型。冒号表示分隔符，分号表示结束符。表单一、介绍标签表示为表单，表单元素是允许用户在表单中输入内容。属性：action-提交表单的地址 Method-提交表单的方式。属性值：get/post ...

MyFaith 2019-08-30 13:48 评论0 收藏0