精华内容
下载资源
问答
  • Vue el-checkbox 复选框 样式修改
    千次阅读
    2020-04-28 11:01:40
     .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
        background-color:rgba(47, 84, 201, 1);
        border-color: rgba(47, 84, 201, 1);
      }
      .el-checkbox__input.is-checked + .el-checkbox__label {
        color: rgba(47, 84, 201, 1);
      }
      .el-checkbox.is-bordered.is-checked{
        border-color: rgba(47, 84, 201, 1);
      }
      .el-checkbox__input.is-focus .el-checkbox__inner{
        border-color:  rgba(47, 84, 201, 1);
      }
    
    更多相关内容
  • checkbox 复选框样式

    2015-11-25 13:38:05
    checkbox 复选框样式 自定义,修改原有浏览器样式
  • 我们都知道一般情况利用css来定义Radio单选项和Checkbox复选框样式是无效的,下面我来给大家介绍利用CSS定义Radio单选项和Checkbox复选框样式,有需要了解的朋友可参考。 完全使用css来实例 复制代码代码如下: <...
  • 查看演示,可以看到我们将要创建的复选框样式。演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。 CSS Code复制内容到剪贴板 /** *...
  • 直接使用HTML5中的input复选框checkbox样式是这样滴(左)但是嘞,UI设计稿是这样滴(右): <input class="sure" type="checkbox" name="" value=""> 因此,我们需要动脑筋修改checkbox样式了。 1....

    人生何其短,要笑得分外甜

    公司的H5项目又让我重新捡回来HTML5和原生JS和Jquery,今日遇到了checkbox的样式问题,做一个小小记录。


    直接使用HTML5中的input复选框checkbox的样式是这样滴(左) 但是嘞,UI设计稿是这样滴(右):

    <input class="sure" type="checkbox" name="" value="">

     因此,我们需要动脑筋修改checkbox的样式了。

    1. 首先,需要添加一段CSS隐藏所有的Checkbox复选框。之后我们改变它的外观

    input[type=checkbox] {
      visibility: hidden;
    }

     2. 隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素。

    由于,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中。这意味着可以通过label的点击事件来处理我们的Checkbox复选框。

    <div class="checkBox">
      <input class="sure" type="checkbox" name="" value="1" id="checkBoxInput">
      <label for="checkBoxInput"></label>
    </div>

     因此,一个label不足以完成任务,我们用一个DIV元素包含checkbox,我们需要使用它们来做样式。

    .checkBox {
      position: relative;
      width: 0.48rem;
      height: 0.48rem;
      background: #ffffff;
    }

    3. label标签用于Click事件和我们要定义的复选框的方框样式。

    
    .checkBox label {
      cursor: pointer;
      position: absolute;
      width: 0.48rem;
      height: 0.48rem;
      top:0;
      left: 0;
      background: #ffffff;
      border: 0.01rem solid #c2c2c2;
      border-radius: 0.04rem;
    }

     4. 接下来,我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后,它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下,这样看起来就像是一个对勾。

    .checkBox label:after {
      opacity: 0.5;  /*修改为0*/
      content: '';
      position: absolute;
      width: 0.3rem;
      height: 0.2rem;
      background: transparent;
      top: 0.09rem;
      left: 0.07rem;
      border: 0.05rem solid #2381D8;
      border-top: none;
      border-right: none;
    
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
    }

     5. 在上面的CSS中,我们已经设置它的透明度为0.5,所以你直接可以看到复选框有一个半透明的对勾。可以最后修改其为透明,悬停的时候加深一点,在选中时把设置为不透明。

    .checkBox label:hover::after {
      opacity: 0;
    }
    .checkBox input[type=checkbox]:checked + label:after {
      opacity: 1;
    }

    至此,就完成了checkbox的样式修改,你可以按照你的UI修改其颜色大小即可。 


    顺便回顾一下:after和::after和:before和::before

    ::before和::after匹配一个虚拟元素,主要被用于为当前元素增加装饰性内容的。他显示的内容是其自身的“content”属性,默认是内联元素。

    浅谈css的伪元素::after和::before     https://www.cnblogs.com/yuer20180726/p/11150213.html


    参考链接:https://www.jb51.net/css/563957.html 纯CSS设置Checkbox复选框控件的样式(五种方法)

    展开全文
  • NULL 博文链接:https://wxy-yueruo.iteye.com/blog/965348
  • 下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式
  • 之前我们分享过一款非常不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮,外观非常时尚。今天我们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox...这几款复选框样式很丰富,使用起来也比较方便。
  • 下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式。 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要...

    下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式。

    首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。

    隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中。这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框。

    样式一

    此复选框风格就像一个解锁滑块,滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮(label标签),将会选中复选框,然后滑块移动到ON位置。

    我们开始创建复选框区的HTML。

    因为这个样式的复选框,一个label不足以完成任务,我们用一个DIV元素包含checkbox,我们需要使用它们来做黑色条带和圆角。

    现在,我们可以把label作为条带上的滑块,我们希望按钮效果是从条带的一侧移动到另一侧,我们可以添加label的过渡。

    现在这个滑块在选中(关闭)位置,当我们选中复选框,我们希望有一个反应发生,所以我们可以移动滑块到另一端。我们需要知道,判断复选框被选中,如果是则改变label元素的left属性。

    这就是你需要的第一个Checkbox复选框的CSS。

     

    样式二

    此复选框风格像样式一样,但不同的是,这个滑块按钮会改变颜色。当您单击滑块按钮,它移动到条带的另一边,并改变按钮的颜色。

    HTML代码和样式一是完全一样的。

    这个DIV会变成比样式一大一些的条带,label依然是作为滑块,使用下面的CSS来定义它。

    这个样式中间有一个黑色的条,滑块会沿着它左右滑动,但是DIV元素已经使用了,所以我们需要用:before伪类创建一个新的元素。

    和样式一一样,接下来我们为label写CSS样式,把它用作滑块。

    我要实现和样式一差不多的选中状态,当选中时改变label的left和background属性。

     

    样式三

     

    这个复选框的样式比样式二更复杂一些,它和前面的例子一样会左右滑动,并且当改变选中和未选中的状态时,滑块滑动到另一侧并且在原位置显示对应的文本。

    首先,我们写HTML代码,这和前面是相同的。

    然后,我们用相同的方式把div作为滑块,下面的代码会创建一个黑色圆角的条带,我们可以把滑块和文本放到里面。

    当滑块处于未选中状态时,滑块会在左侧,并且右边显示”OFF”,当点击的时候,滑块移动到右侧,左侧显示”ON”。
    但是元素数量不足以让我们实现这些功能,所以我们要用:before和:after两个伪类创建两个元素,分别放置”ON”和”OFF”。

    和前面一样,我们来添加滑块的样式,当被点击时它会移动到另一侧,并且改变颜色。

     

    样式四

    在这个样式中,我们会创建两个圆形,当点击时改变里面的圆形的颜色表示选中与未选中的状态。
    和前面一样的HTML代码。

    接下来我们要为checkbox创建外面的圆形,使用CSS的border-radius属性,并且设置为100%就可以创建一个正圆形。

    然后我们用label元素来创建一个小一点的圆形,它会根据checkbox状态来改变颜色。

     

    样式五

    这个复选框的样式有些不同,它看起来只是比浏览器默认的checkbox样式稍微好了些,但是不同的是我们可以根据自己的需要来定义它的样式了。
    首先还是一样的HTML代码

    在前面的例子中,我们把div作为checkbox的滑动条带或者外部的圆圈,但是这一次我们不需要了,可以使用div元素来设置复选框的区域。

    label标签用于Click事件和我们要定义的复选框的方框样式。

    接下来,我们要创建方框中的对勾,对于这一点,我们可以使用:after伪类创建一个新的元素,为了实现这个样式,我们可以创建一个5px x 9px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后,它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下,这样看起来就像是一个对勾。

    在上面的CSS中,我们已经设置它的透明度为0.2,所以你会看到的复选框有一个半透明的对勾。你可以在悬停的时候加深一点,在选中时,可以把设置为不透明。

    这将会为你创建全新的checkbox复选框样式。

     

    展开全文
  • askjashdjk <!DOCTYPE html> <html> <head> <style type="text/css"> /* Customize the label (the container) */ .container { display: block; position: relative;...

    askjashdjk

    <!DOCTYPE html>
    <html>
    	<head>
    		<style type="text/css">
    			/* Customize the label (the container) */
    			.container {
    			  display: block;
    			  position: relative;
    			  padding-left: 35px;
    			  margin-bottom: 12px;
    			  cursor: pointer;
    			  font-size: 22px;
    			  -webkit-user-select: none;
    			  -moz-user-select: none;
    			  -ms-user-select: none;
    			  user-select: none;
    			}
    			
    			/* Hide the browser's default checkbox */
    			.container input {
    			  position: absolute;
    			  opacity: 0;
    			  cursor: pointer;
    			  height: 0;
    			  width: 0;
    			}
    			
    			/* Create a custom checkbox */
    			.checkmark {
    			  position: absolute;
    			  top: 0;
    			  left: 0;
    			  height: 25px;
    			  width: 25px;
    			  background-color: #eee;
    			}
    			
    			/* On mouse-over, add a grey background color */
    			.container:hover input ~ .checkmark {
    			  background-color: #ccc;
    			}
    			
    			/* When the checkbox is checked, add a blue background */
    			.container input:checked ~ .checkmark {
    			  background-color: #2196F3;
    			}
    			
    			/* Create the checkmark/indicator (hidden when not checked) */
    			.checkmark:after {
    			  content: "";
    			  position: absolute;
    			  display: none;
    			}
    			
    			/* Show the checkmark when checked */
    			.container input:checked ~ .checkmark:after {
    			  display: block;
    			}
    			
    			/* Style the checkmark/indicator */
    			.container .checkmark:after {
    			  left: 9px;
    			  top: 5px;
    			  width: 5px;
    			  height: 10px;
    			  border: solid white;
    			  border-width: 0 3px 3px 0;
    			  -webkit-transform: rotate(45deg);
    			  -ms-transform: rotate(45deg);
    			  transform: rotate(45deg);
    			}
    		</style>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    		<form>
    		<label class="container">One
    		  <input type="checkbox" checked="checked" name="one" value="one"/>
    		  <span class="checkmark"></span>
    		</label>
    		
    		<label class="container">Two
    		  <input type="checkbox" name="two" value="two" checked="checked"/>
    		  <span class="checkmark"></span>
    		</label>
    		
    		<label class="container">Three
    		  <input type="checkbox" name="three" value="three"/>
    		  <span class="checkmark"></span>
    		</label>
    		
    		<label class="container">Four
    		  <input type="checkbox" name="four" value="four"/>
    		  <span class="checkmark"></span>
    		</label>
    		 <button type="submit">提交</button>
    		 </form>
    	</body>
    </html>
    

     

    展开全文
  • Flutter Checkbox 复选框

    2019-10-11 09:02:16
    Flutter 复选框 有两种:一 是精简版Checkbox复选框 ,二是自带标题和副标题CheckboxListTile复选框
  • Layui实现checkbox复选框的单选及取消单选,即只能选一个或者全都不选, layui 数据表格复选框实现单选功能
  • 纯CSS自定义Html中Checkbox复选框样式

    千次阅读 2017-11-14 16:07:00
    首先,需要添加一段CSS隐藏所有的Checkbox复选框,之后我们会改变它的外观。 要做到这一点需要添加一段代码到你的CSS文件中。 /** * 隐藏默认的checkbox */ input[type=checkbox] { visibility: hidden; } ...
  • CSS3美化复选框checkbox

    2019-11-11 21:36:39
    CSS3美化复选框checkbox CSS3美化复选框checkbox CSS3美化复选框checkbox CSS3美化复选框checkbox CSS3美化复选框checkbox
  • 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:...
  • 这是一款效果非常酷的CSS3复选框checkbox样式美化效果。该复选框美化效果共有11种。默认的复选框样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式。使用方法HTML结构该...
  • CSS3自定义美化复选框Checkbox按钮样式代码 CSS3自定义美化复选框Checkbox按钮样式代码 CSS3自定义美化复选框Checkbox按钮样式代码
  • bootstraps 复选框样式 优化 样式修改
  • &...checkbox"class="input_check" id="check02"&gt;&lt;label for="check02" class="mr10"&gt;&lt;/label&gt; &lt;./div
  • 本特效源码是一组效果非常炫酷的checkbox复选框CSS3动画特效代码。通过使用checkbox.css样式,可以在点击复选框时产生各种非常酷的CSS3动画效果。本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera、...
  • Bootstrap复选框样式美化特效是一款基于jQuery实现的bootstrap美化单复选框特效代码。
  • 复选框checkbox实现自定义样式

    千次阅读 2020-05-09 13:55:23
    方法很简单,首先讲默认的checkbox样式隐藏起来,在用两张准备好的图片(选中状态的图片和未选中的图片)作为复选框checkbox的背景图片就行了。 参考代码: <!DOCTYPE HTML> <html x...
  • 关于复选框的样式,有一点是...Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的。为什么不把你的网站中的Checkbox设置一个与众不同...
  • 这次给大家带来CSS设置Checkbox复选框的样式,CSS设置Checkbox复选框样式的注意事项有哪些,下面就是实战案例,一起来看一下。首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点...
  • 主要介绍了yii实现CheckBox复选框在同一行显示的方法,对比了网上搜集的方法,给出了改进的意见,非常具有实用价值,需要的朋友可以参考下
  • 首先,使用JS动态产生Checkbox可以采用如下类似的语句: 代码如下:var checkBox=document.createElement(“input”);checkBox.setAttribute(“type”,”checkbox”);checkBox.setAttribute(“id”,’123456′);但是...
  • 监听选中的复选框触发事件..接下来写方法了 //点击获取节点信息. function testClick(e, treeId, treeNode) { //树对象 treeObj = $.fn.zTree.getZTreeObj("treeDemo"); var nodes2 = treeObj....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 30,654
精华内容 12,261
关键字:

checkbox复选框样式