css 设置 checkbox复选框控件的对勾√样式

最终的样式，想要的效果：

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

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

    4. 

  4. <head>
    5. 

  5.   <meta charset="UTF-8">
    6. 

  6.   <title>选中标签forcheck</title>
    7. 

  7.   <style type="text/css">
    8. 

  8. .div-checked label {
    9. 

  9.     cursor: pointer;
    10. 

  10.     position: relative;
    11. 

  11.     display: inline-block;
    12. 

  12.     width: 150px;
    13. 

  13.     height: 38px;
    14. 

  14.     border: 1px solid grey;
    15. 

  15.   }
    16. 

  16.   /**
    17. 

  17.    * 按钮透明
    18. 

  18.    * @type {String}
    19. 

  19.   */  
    20. 

  20.   input[type="checkbox"] {
    21. 

  21.     opacity: 0;
    22. 

  22.   }
    23. 

  23.   
    24. 

  24.   /**
    25. 

  25.    * checkbox选中样式
    26. 

  26.    * @type {String}
    27. 

  27.    */
    28. 

  28.   input[type="checkbox"]:checked + i {
    29. 

  29.     border-color: blue;
    30. 

  30.     color: blue;
    31. 

  31.   }  
    32. 

  32.   
    33. 

  33.   /**
    34. 

  34.    * i标签的大小
    35. 

  35.    */
    36. 

  36.   i {
    37. 

  37.     position: absolute;
    38. 

  38.     top: 0;
    39. 

  39.     left: 0;
    40. 

  40.     width: 100%;
    41. 

  41.     height: 100%;
    42. 

  42.     border: 1px solid #ccc;
    43. 

  43.     text-align: center;
    44. 

  44.     line-height: 36px;
    45. 

  45.   }
    46. 

    47. 

  47.   /**
    48. 

  48.    * 对勾√效果，使用border
    49. 

  49.    * @type {[type]}
    50. 

  50.    */
    51. 

  51.   
    52. 

  52.   span:after {
    53. 

  53.     opacity: 1;
    54. 

  54.     content: ‘‘;
    55. 

  55.     position: absolute;
    56. 

  56.     width: 5px;
    57. 

  57.     height: 15px;
    58. 

  58.     background: transparent;
    59. 

  59.     top: 10px;
    60. 

  60.     right: 5px;
    61. 

  61.     border: 2px solid #fff;
    62. 

  62.     border-top: none;
    63. 

  63.     border-left: none;
    64. 

  64.     -webkit-transform: rotate(35deg);
    65. 

  65.     -moz-transform: rotate(35deg);
    66. 

  66.     -o-transform: rotate(35deg);
    67. 

  67.     -ms-transform: rotate(35deg);
    68. 

  68.     transform: rotate(35deg);
    69. 

  69.   }
    70. 

  70.   
    71. 

  71.   /**
    72. 

  72.    * 选中状态，span(三角形)样式
    73. 

  73.    * @type {String}
    74. 

  74.    */
    75. 

  75.   input[type="checkbox"]:checked + i + span {
    76. 

  76.     width: 0px;
    77. 

  77.     height: 0px;
    78. 

  78.     border-color: blue transparent;
    79. 

  79.     border-width: 0px 0px 30px 30px;
    80. 

  80.     border-style: solid;
    81. 

  81.     position: absolute;
    82. 

  82.     right: -1px;
    83. 

  83.     top: 10px;
    84. 

  84.     opacity: 1;
    85. 

  85.   }
    86. 

  86.   
    87. 

  87. }
    88. 

    89. 

  89. }
    90. 

  90.   </style>
    91. 

  91. </head>
    92. 

    93. 

  93. <body>
    94. 

  94.   <div class="div-checked">
    95. 

  95.     <label>
    96. 

  96.       <input type="checkbox" value="cbEticket">
    97. 

  97.       <i>电子票</i><span></span>
    98. 

  98.     </label>
    99. 

  99.     <label>
    100. 

  100.       <input type="checkbox" checked="" value="cbMeetingRemind">
    101. 

  101.       <i>会议提醒</i><span></span>
    102. 

  102.     </label>
    103. 

  103.   </div>
    104. 

  104. </body>
    105. 

    106. 

  106. </html>
    107.
时间： 2024-10-24 17:40:24

css 设置 checkbox复选框控件的对勾√样式的相关文章

纯CSS设置Checkbox复选框控件的样式

下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一段代码到你的CSS文件中. 隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中.这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框. 样式一 此复选框

转 纯CSS设置Checkbox复选框控件的样式

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. css-style-checkboxes 查看演示,可以看到我们将要创建的复选框样式. 演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一

【转】纯CSS设置Checkbox复选框控件的样式

Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至可以让它看起来一点也不像复选框. 在本教程中,我们将创建5个不同的选择框,你可以在你的网站上使用它. css-style-checkboxes 查看演示,可以看到我们将要创建的复选框样式. 演示地址 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一

CheckBox复选框控件

CheckBox复选框控件 一.简介 1. 2.类结构图 二.CheckBox复选框控件使用方法 这里是使用java代码在LinearLayout里面添加控件 1.新建LinearLayout布局 2.建立CheckBox的XML的Layout文件 3.通过View.inflate()方法创建CheckBox CheckBox checkBox=(CheckBox) View.inflate(this, R.layout.checkbox, null); 4.通过LinearLayout的add

Android控件之CheckBox(复选框控件)

一.有两种状态: 选中状态(true).未选中状态(false) 二.属性 android:id = "@+id/checkbox" android:layout_width="match_parent" android:layout_height="wrap_content" android:checked = "false" android:text = "男" 三.代码演示 <LinearLay

【mfc】组框、单选框控件与复选框控件

VC6中的MFC中的单选框与复选框控件也不简单,它没有VS中C#那样可以之间通过一个封装之后的函数进行判断,该单选框/复选框有没有被选中啊?或者控制单选框/复选框的选中状态.这东西比较复杂,通过相应的值来控制的. 一.基本目标 下面就用一个简单例子来说明VC6中的MFC中的单选框与复选框控件,点击"确定"按钮能够判断对话框中的所有单选框与复选框的选中状态.Radio1-Radio3互成一个组,组内仅能够有一个组员被选中,Radio4-Radio5也互成一组,选择Radio4能够令复选框

纯CSS修改checkbox复选框样式

借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box_inner1{ width: 25px; margin: 20px 100px; /*最外层盒子的外边距, 可自己调*/ position:

Asp.net自定义单选复选框控件

将常用的jquery插件封装成控件也是个不错的选择 下面是效果的简单颜色,由于博客系统的限制没法完整演示最终效果,请下载示例查看 Asp.netWeb APIC#Javascript 1.新建类库项目,创建数据源类 [Serializable] public class Select2Item { public bool Selected { get; set; } public string Text { get; set; } public string Value { get; set;

RDLC报表中复选框控件

RDLC中没有复选框控件,如果想在报表中实现复选框的功 能. 按以下步骤做即可: 1.确定系统中有没有Wingdings 2字体,如果没有则下载安装. 2.在报表中添加一文本框,然后选择文本框的字体为Wingdings 2. 3.在文本框的表达式中输入 =IIf( 你的条件, Chr(82), Chr(163))