自己做一个css复选框

淡淡的烟草味﹌ 2022-09-15 11:49 292阅读 0赞 
  1. <!DOCTYPE>
  2. <meta charset='UTF-8' />
  4. <style>
  6. .span_my_checkbox {
  7.     display:inline-block;
  8.     border:1px solid limegreen;
  9.     position:relative;
  10.     padding:10px;
  11.     text-align:center;
  12.     width:100px;
  13. }
  15. .span_my_yes {
  16.     width: 0;
  17.     height: 0;
  18.     position:absolute;
  19.     bottom:0;
  20.     right:0;
  21.     border-bottom: 15px solid limegreen;
  22.     border-left: 30px solid transparent;
  23. }
  25. .span_my_yes:after {
  26.     content:'';
  27.     position:absolute;
  28.     right:5;
  29.     width:5px; height:10px;
  30.     top:2;
  31.     border:1px solid white;
  32.     border-top:0;
  33.     border-left:0;
  34.     background:transparent;
  35.     -webkit-transform: rotate(35deg);
  36.     -moz-transform: rotate(35deg);
  37.     -o-transform: rotate(35deg);
  38.     -ms-transform: rotate(35deg);
  39.     transform: rotate(35deg);
  40. }
  42. </style>
  46. <span class='span_my_checkbox' >
  47. 苹果
  48. <span class='span_my_yes'></span>
  49. </span>
  51. <span class='span_my_checkbox' >
  52. 梨子
  53. <span class='span_my_yes'></span>
  54. </span>

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd3V6dXl1MzY1_size_20_color_FFFFFF_t_70_g_se_x_16

发表评论

表情：
评论列表 （有 0 条评论，292人围观）

还没有评论，来说两句吧...

相关阅读

    相关 jQuery 单选框/复选框美化

    对于前端萌新来说，美化表单是个痛苦的事情，通常都是去寻找插件这种逃避的办法，其实这并不是难事。在上篇文章中提到了兄弟元素选择器在表单美化中表现突出，下面的示例源码将体现 基础篇

    我不是女神ヾ我不是女神ヾ/ 0 赞/ 649 阅读

    相关 AngularJS单选、复选框

    　　在项目开发中，有应用到单选、复选框，对于Angular来讲，其实有很多实现方法。如下应用实例： 一.AngularJS radio单选实例 　　在页面上有几个项目名称，

    清疚清疚/ 0 赞/ 802 阅读