zoukankan      html  css  js  c++  java
  • 纯css单选框

    1.没有用bootstrap时:

     1 .has_sel,.un_sel{display:block; 16px; height: 16px; border: 1px solid #B06A50; border-radius: 1px; position: relative; }
     2         .has_sel:before{content: "";  2px; height: 6px; background-color: #B06A50; border-radius: 1px; position: absolute; left: 4px; bottom: 3px;
     3              transform:rotate(-45deg);
     4             -ms-transform:rotate(-45deg);     /* IE 9 */
     5             -moz-transform:rotate(-45deg);     /* Firefox */
     6             -webkit-transform:rotate(-45deg); /* Safari 和 Chrome */
     7             -o-transform:rotate(-45deg);  /* opear */
     8         }
     9         .has_sel:after{content: "";  2px; height: 10px; background-color: #B06A50; border-radius: 1px; position: absolute; left: 8px; bottom: 3px;
    10              transform:rotate(37deg);
    11             -ms-transform:rotate(37deg);     /* IE 9 */
    12             -moz-transform:rotate(37deg);     /* Firefox */
    13             -webkit-transform:rotate(37deg); /* Safari 和 Chrome */
    14             -o-transform:rotate(37deg);  /* opear */
    15         }

    2.使用bootstrap时(因为bootstrap中css设置了*box-sizing: border-box;属性,所以会影响定位的位置),需要将bottom下移一个像素;即bottom:2px;

    3.效果图

    4.总结

    之前一直用背景图做这个记住密码单选框,每一次这个框都大差不差,最多就是颜色差异,或者圆角直角的差异,现在用纯css写出来不仅不用每次都要作图,而且还提高了效率。感兴趣的同学可以搜索  pure css icon 看看,感觉很吊的样子。

  • 相关阅读:
    JavaScript 类型转换
    Bjarne Stroustrup
    格拉丘纳斯的上下级关系理论
    成功者必须具备的三大技能
    ASP.NET/Perl.NET (转)
    iPhone/Mac ObjectiveC内存管理教程和原理剖析
    objectivec日期之间比较可用以下方法
    Centos下安装中文输入法
    C#中数字的四舍五入与只取整
    关于Application.Lock和Lock(obj)
  • 原文地址:https://www.cnblogs.com/codebook/p/5919500.html
Copyright © 2011-2022 走看看