精华内容
下载资源
问答
  • 11种炫酷CSS3复选框checkbox样式美化效果
    2021-06-10 17:13:46

    这是一款效果非常酷的CSS3复选框checkbox样式美化效果。该复选框美化效果共有11种。默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式。

    使用方法

    HTML结构

    该复选框美化效果的HTML结构如下:

    Check?

    当用户点击label的时候,实际上是点击了#checkbox-1。

    CSS样式

    通过label和checkbox,我们可以将checkbox隐藏,而将label制作为各种好看的复选框样式。我们可以使用:before和:after伪元素来制作各种效果,如滑动按钮的效果。这些效果都可以通过相邻兄弟选择器来选择与checkbox相邻的label来实现,下面是一个简单的例子:

    #checkbox-1 {

    display: none;

    }

    #checkbox-1 + label {

    color: red;

    }

    #checkbox-1:checked + label {

    color: blue;

    }

    现在,但用户点击label的时候,label的颜色将由红色变为蓝色。使用这个方法,我们可以制作出各种各样的复选框效果。

    浏览器支持

    浏览器对该效果的支持还是十分不错的,某些效果需要CSS 3D,这些效果只有IE10+的浏览器支持。你可以使用Modernizr来检测浏览器对3D效果的支持。Modernizr的使用方法非常简单,你可以下载Modernizr with CSS 3D Transforms,在页面中引入下载的文件,然后添加下面的代码即可在浏览器支持3D效果时才将checkbox复选框进行美化。

    window.onload = function() {

    var Modernizr = window.Modernizr;

    if(Modernizr.csstransforms3d) {

    var head = document.querySelector('head');

    head.innerHTML = head.innerHTML + '';

    }

    }

    不带3D transforms效果的美化复选框可以在IE9+浏览器中支持工作。如果要支持IE8及以下的浏览器,可以提供一个回退代码,使复选框在IE8及以下的浏览器中显示为普通的HTML复选框样式。

    更多相关内容
  • HTML自带的复选框或者单选框按钮样式都是比较简单的一种. 而有时候这些表单控制, 可能需要配合自己的主题样式. 需要去美化他们. 以前可能需要借助JS的实现. 现在CSS也可以完全实现我们想要的效果. 效果图: 我们直奔...
  • 通过使用:after和:before伪类附带的新功能,您可以实现相当酷的自定义复选框效果。这样做的好处是:您不需要向DOM添加任何...FF + IE仍然允许复选框运行,只是没有样式,这将有希望在未来改变(代码不使用供应商前缀)...

    通过使用:after和:before伪类附带的新功能,您可以实现相当酷的自定义复选框效果。这样做的好处是:您不需要向DOM添加任何内容,只需添加标准复选框。

    请注意,这仅适用于兼容的浏览器,我相信这与某些浏览器不允许您设置:after和:before输入元素的事实有关。遗憾的是,目前只支持webkit浏览器。FF + IE仍然允许复选框运行,只是没有样式,这将有希望在未来改变(代码不使用供应商前缀)。

    这只是一个Webkit浏览器解决方案(Chrome,Safari,移动浏览器)

    参见示例小提琴

    $(function() {

    $('input').change(function() {

    $('div').html(Math.random());

    });

    });

    /* Main Classes */

    .myinput[type="checkbox"]:before {

    position: relative;

    display: block;

    width: 11px;

    height: 11px;

    border: 1px solid #808080;

    content: "";

    background: #FFF;

    }

    .myinput[type="checkbox"]:after {

    position: relative;

    display: block;

    left: 2px;

    top: -11px;

    width: 7px;

    height: 7px;

    border-width: 1px;

    border-style: solid;

    border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;

    content: "";

    background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);

    background-repeat: no-repeat;

    background-position: center;

    }

    .myinput[type="checkbox"]:checked:after {

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);

    }

    .myinput[type="checkbox"]:disabled:after {

    -webkit-filter: opacity(0.4);

    }

    .myinput[type="checkbox"]:not(:disabled):checked:hover:after {

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);

    }

    .myinput[type="checkbox"]:not(:disabled):hover:after {

    background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);

    border-color: #85A9BB #92C2DA #92C2DA #85A9BB;

    }

    .myinput[type="checkbox"]:not(:disabled):hover:before {

    border-color: #3D7591;

    }

    /* Large checkboxes */

    .myinput.large {

    height: 22px;

    width: 22px;

    }

    .myinput.large[type="checkbox"]:before {

    width: 20px;

    height: 20px;

    }

    .myinput.large[type="checkbox"]:after {

    top: -20px;

    width: 16px;

    height: 16px;

    }

    /* Custom checkbox */

    .myinput.large.custom[type="checkbox"]:checked:after {

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);

    }

    .myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {

    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);

    }

    Normal:
    Small:
    Large:
    Custom icon:

    $(function() {

    var f = function() {

    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');

    };

    $('input').change(f).trigger('change');

    });

    body {

    font-family: arial;

    }

    .flipswitch {

    position: relative;

    background: white;

    width: 120px;

    height: 40px;

    -webkit-appearance: initial;

    border-radius: 3px;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);

    outline: none;

    font-size: 14px;

    font-family: Trebuchet, Arial, sans-serif;

    font-weight: bold;

    cursor: pointer;

    border: 1px solid #ddd;

    }

    .flipswitch:after {

    position: absolute;

    top: 5%;

    display: block;

    line-height: 32px;

    width: 45%;

    height: 90%;

    background: #fff;

    box-sizing: border-box;

    text-align: center;

    transition: all 0.3s ease-in 0s;

    color: black;

    border: #888 1px solid;

    border-radius: 3px;

    }

    .flipswitch:after {

    left: 2%;

    content: "OFF";

    }

    .flipswitch:checked:after {

    left: 53%;

    content: "ON";

    }

    Webkit friendly mobile-style checkbox/flipswitch

    展开全文
  • 复选框在网页中很是常见,无论是电商网站,还是平台,只有有需要选择的地方就会见到复选的身影。接下来,是我之前写过的两个小demo,都是关于复选框的,希望会给大家带来帮助。 第一个是关于复选框全选反选的操作,...
  • 复选框,单选框都不好直接用css样式美化,总得用点奇思妙想才行。...css怎么美化复选框样式利用label挂钩checkbox的特点来实现。当html代码中,label的for属性值和checkbox的id值一样的时候,label就可以控制c...

    复选框,单选框都不好直接用css样式美化,总得用点奇思妙想才行。如果只考虑谷歌内核的浏览器的话,那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持,这就逼得大家另想办法了。

    9afff0b90890bff98ca90ae1e9b05b58.png

    css怎么美化复选框样式

    利用label挂钩checkbox的特点来实现。

    当html代码中,label的for属性值和checkbox的id值一样的时候,label就可以控制checkbox的选择了。

    html代码如下:

    全天

    为label的伪元素添加背景图片,覆盖真正的checkbox对象,这样,既有图片的美观效果,又有checkbox一切的交互行为。

    设计一个图片如下,默认状态,点击状态,不可用状态。(相关课程推荐:css视频教程)

    66fa178f3c30755de0303702dee90401.png

    这里使用了定位,不然不能覆盖原始的复选框。而且文字和图片之间要间隔,文字也需要设置为定位对象。总之,这里都是定位关系。

    这个效果只兼容IE9以上。

    CSS#check {

    position: relative;

    }

    input[type=checkbox]+label {

    position: absolute;

    width: 60px;

    height: 20px;

    }

    input[type=checkbox]+label:before {

    content: "";

    position: absolute;

    width: 20px;

    height: 20px;

    background: url(images/btn1.png) no-repeat;

    }

    input[type=checkbox]+label span {

    font-size: 14px;

    position: absolute;

    left: 30px;

    }

    input[type=checkbox]:checked+label:before {

    background-position: -28px 0;

    }

    input[type=checkbox] {

    position: absolute;

    left: 0;

    top: 0;

    }

    本文来自css答疑栏目,欢迎学习!

    展开全文
  • 我们都知道一般情况利用css来定义Radio单选项和Checkbox复选框样式是无效的,下面我来给大家介绍利用CSS定义Radio单选项和Checkbox复选框样式,有需要了解的朋友可参考。 完全使用css来实例 复制代码代码如下: <...
  • 描述: 通过CSS改变复选框默认样式 input[type = "checkbox"]{ width: 16px; height: 16px; vertical-align: middle; -webkit-appearance: none; /*清除默认样式*/ border: 1px solid #D1D1D1; } input[type = ...

    描述: 通过CSS改变复选框默认样式

    在这里插入图片描述

    input[type = "checkbox"]{
        width: 16px;
        height: 16px;
        vertical-align: middle;
        -webkit-appearance: none; /*清除默认样式*/
        border: 1px solid #D1D1D1;
    }
    input[type = "checkbox"]:checked{
        background:url("../img/checked.jpg") no-repeat center center;
    }
    
    
    展开全文
  • HTML导入代码模板:Checkbox样式body {color: #444;font-size: 1.6em;background: #ccc;}.container {width: 90%;margin: 20px 3%;padding: 25px;min-height: 400px;height: auto;background: #FFF;}section {float:...
  • 修改复选框默认样式

    2021-06-11 17:27:34
    我们都知道表单的复选框是有默认样式的,这里就不贴图了,如果希望把复选框样式修改美观一些呢?为如下图所示:实现方法:用label标签关联复选框,把复选框设置为透明(opacity:0;),然后给label加background样式,并...
  • 之前我们分享过一款非常不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮,外观非常时尚。今天我们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox...这几款复选框样式很丰富,使用起来也比较方便。
  • 主要介绍了HTML+CSS实现单选框、复选框美观的样式,需要的朋友可以参考下
  • CSS网格布局模块不仅可以解决布局问题的庞大问题,而且还可以解决我们已经处理了很长时间... 没有CSS网格的复选框样式 自从我们在某处阅读有关标签的内容之后,开发人员就一直在为复选框添加样式标签。 该技术是C...
  • 最近几天在公司做了个后台管理系统的小模块,其中有个功能是实现复选框的全选和全不选,用bootstrap和jQuery来实现。 效果是这样: 因为是内部用,样式也不要求太好看,直接上代码。 示例代码: <!DOCTYPE ...
  • 查看演示,可以看到我们将要创建的复选框样式。演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。 CSS Code复制内容到剪贴板 /** *...
  • 这几款复选框样式很丰富,使用起来也比较方便。 在线演示 源码下载 2、CSS3自定义发光radiobox单选框 之前我们分享过一些CSS3和HTML5实现的自定义checkbox和Radiobox,比如纯CSS3美化Checkbox和Radiobox按钮,不仅...
  • 下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式。 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS...
  • 文本输入框input很简单,但是复选框和单选按钮很难使用CSS进行自定义样式。在本教程中,我将向您展示如何对这些input进行自定义风格设计。复选框(checkbox)自定义样式一 实现思路纯css实现的主要手段是利用label标签...
  • 纯CSS自定义Html中Checkbox复选框样式

    千次阅读 2017-11-14 16:07:00
    首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变它的外观。 要做到这一点需要添加一段代码到你的CSS文件中。 /** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; } ...
  • html的大部分元素中,是可以直接设置它的背景样式的,但其中就不包括radio和checkbox 说实话这两个东西原本的样式确实不怎么好看,所以在很多设计中都会更改 方法多种多样,这是我觉得最简单直接的一种,原理是用...
  • 有checkBox复选框需求时,我们所用的框架样式不符合,所以需要自己写 对勾样式,当然用图片也OK。效果图: html:推送岗位*全部{{item.positionName}}CSS://对号样式.icon-span{display: inline-block;background-...
  • 样式复选框 一个可以实际设置样式复选框! 依赖关系 元素依赖项通过进行管理。 您可以通过以下方式安装: npm install -g bower 然后,继续下载元素的依赖项: bower install 使用元素 只需将这些标签放在<...
  • 首先来看看实现的效果图: ...HTML中无需添加额外的一列来表示复选框,而是由JS完成,所以正常的表格布局就行了: 类别编号 类别名称 类别组 状态 说明 <td>C00001 机车 机车 有效 <t
  • 修改复选框样式

    千次阅读 2018-02-06 11:38:40
    使用渐进增强的方式美化复选框样式 复选框 Checkbox 是 Web 应用常用控件,随处可见,原生的复选框控件一般就像下面这样: 选中状态 未选状态 这取决于操作系统和浏览器,有些时候,这种样子并不能满足设计...
  • 复选框的默认样式是修改无效的,可以曲线救国,设置复选框的伪元素,修改伪元素的样式! input[type=checkbox]{ position: relative; margin-right: 10px; } input[type=checkbox]::after{ position: ...
  • 效果描述: 用过苹果的童鞋应该都喜欢这种样式出现在你的网页中 ... 1、将index.html中的css样式引入到你的网页中 2、将index.html中body中的代码部分复制到你的网页中 (主意保持js路径正确即可)
  • 直接使用HTML5中的input复选框checkbox的样式是这样滴(左)但是嘞,UI设计稿是这样滴(右): <input class="sure" type="checkbox" name="" value=""> 因此,我们需要动脑筋修改checkbox的样式了。 1....
  • checkbox和radio作为网页比较常用的HTML组件,默认样式是无法更改的.单在网页美化中,时常需要更改...这样label标签就和复选框产生关联,点击label标签时,对应的复选框同样接收到数据.html代码如下:(checkbox的id值可以...
  • 本文实例讲述了JS实现点击复选框将按钮或文本框变为灰色不可用的方法。分享给大家供大家参考。具体如下: 在注册时候经常会看不到,如果不点击阅读注册许可的话,提交按钮是灰色的,失效不能提交,必须点它一下,这...
  • 现在是告别单调的html单选框和复选框样式的时候了,这款纯css3单选框和复选框美化效果为您提供了解决方案。该css美化效果简洁大方,动画效果一流,堪称极品。
  • DOCTYPE html> <html> <head> <style type="text/css"> /* Customize the label (the container) */ .container { display: block; position: relative; padding-left: ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,177
精华内容 17,670
关键字:

html复选框样式