• 初始化样式,包括radio优化,checkbox优化


    /* ================================ */
    /* 全局初始化		                */
    /* ================================ */
    /* ===============
     * 重新定义Html元素
     * =============== */
    html, body, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, p, blockquote, fieldset, input { padding: 0; margin: 0; }
    h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, table, th, td { font-size: 1em; font-style: normal; font-weight: normal; }
    strong { font-weight: bold; }
    ul, ol { list-style: none outside none; }
    fieldset, img { border: medium none; vertical-align: middle; }
    caption, th { text-align: left; }
    table { border-collapse: collapse; border-spacing: 0; }
    body { font: 12px/20px "Hiragino Sans GB", "Microsoft Yahei", arial, 宋体, "Helvetica Neue", Helvetica, STHeiTi, sans-serif; color: #666; background: #FFF none repeat scroll 0 0; min- 1200px; }
    input, select, textarea { font: 12px/20px Tahoma, Helvetica, Arial, "5b8b4f53", sans-serif; }
    i, cite, em { font-style: normal; }
    input, button, select, textarea { outline:none }
    html { min-height:101%; }
    /* 链接 */
    a { color: #333; text-decoration: none; outline: medium none; -webkit-transition-property:color; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; }
    a:link, a:visited, a:active { text-decoration: none; }
    a:hover { color: #C81623; text-decoration: none; }
    /* 超出隐藏(需要再设置宽高) */
    .over_hidden { display: block; overflow-x: hidden; overflow-y: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* input放大by input_max.js */
    .parentCls { display: inline-block; *display: inline/*IE7*/;
    *zoom: 1;
    }
    .js-max-input { font-size: 20px; color: #F40; background: #FFFAE5; white-space: nowrap; padding: 7px; border: solid 1px #FFD2B2; }
    /* Clearfix,避免因子元素浮动而导致的父元素高度缺失能问题 */
    	.clearfix:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; }
    .clearfix { display: inline-block; }
    html[xmlns] .clearfix { display: block; }
    *html .clearfix { height:1%; }
    *+html .clearfix { height:1%; }
    time { color: #777; }
    /* ==========================
     * 为旧版本浏览器格式化Html5元素
     * ========================== */
    article, aside, dialog, footer, header, section, footer, nav, figure, menu { display:block; }
    /*文字排版
    ******************************/
    .f12 { font-size:12px; }
    .f13 { font-size:13px; }
    .f14 { font-size:14px; }
    .f16 { font-size:16px; }
    .f20 { font-size:20px; }
    .fb { font-weight:bold; }
    .fn { font-weight:normal; }
    .t2 { text-indent:2em; }
    .lh150 { line-height:150% }
    .lh180 { line-height:180% }
    .lh200 { line-height:200% }
    .unl { text-decoration:underline; }
    .no_unl { text-decoration:none; }
    .noborder { border-style:none!important; border- 0!important; }
    /*定位
    ******************************/
    .tl { text-align:left !important; }
    .tc { text-align:center !important; }
    .tr { text-align:right !important; }
    .bc { margin-right:auto; margin-left:auto; }
    .fl { float:left; display:inline; }
    .fr { float:right !important; display:inline; }
    .cb { clear:both; }
    .cl { clear:left; }
    .cr { clear:right; }
    .vm { vertical-align: middle; }
    .vt { vertical-align: top; }
    .pr { position:relative; }
    .pa { position:absolute; }
    .abs-right { position:absolute; right:0; }
    .zoom { zoom:1 }
    /*.hidden { visibility:hidden;*/}
    .none { display:none; }
    .clear { clear: both; height: 0; font-size: 0; line-height:0; }
    /*长度高度
    ******************************/
    .w10 { 10px; }
    .w20 { 20px; }
    .w30 { 30px; }
    .w40 { 40px !important; }
    .w50 { 50px !important; }
    .w60 { 60px !important; }
    .w65 { 65px !important; }
    .w70 { 70px !important; }
    .w80 { 80px !important; }
    .w90 { 90px; }
    .w96 {  96px; }
    .w100 { 100px !important; }
    .w110 { 110px !important; }
    .w120 { 120px !important; }
    .w130 { 130px !important; }
    .w150 { 150px !important; }
    .w160 { 160px; }
    .w180 { 180px; }
    .w200 { 200px !important; }
    .w210 { 210px !important; }
    .w230 { 230px; }
    .w240 { 240px; }
    .w250 { 250px !important; }
    .w270 { 270px; }
    .w300 { 300px !important; }
    .w340 { 340px; }
    .w380 { 380px; }
    .w400 { 400px!important; }
    .w450 { 450px!important; }
    .w500 { 500px; }
    .w530 { 530px; }
    .w600 { 600px !important; }
    .w700 { 700px; }
    .w780 {  780px; }
    .w800 { 800px; }
    .w208 {  208px; }
    .w { 100%; }
    .h20 { height: 20px !important; }
    .h30 { height: 30px !important; }
    .h40 { height: 40px !important; }
    .h50 { height: 50px !important; }
    .h80 { height: 80px; }
    .h100 { height:100px !important; }
    .h200 { height:200px; }
    .h500 { height:500px !important; }
    .h { height:100% }
    .size30 {  30px; height: 30px; }
    .size32 {  32px; height:32px; }
    .size40 {  40px; height:40px; }
    .size60 {  60px; height:60px; }
    .size70 {  70px; height: 70px; }
    .size72 {  72px; height: 72px; }
    .size75 {  75px; height: 75px; }
    .size80 {  80px; height:80px; }
    .size90 {  90px; height:90px; }
    .size100 {  100px; height: 100px; }
    .size110 {  110px; height: 110px; }
    .size120 {  120px; height: 120px; }
    .size128 {  128px; height: 128px; }
    .size160 {  160px; height: 160px; }
    .size160-48 {  160px; height: 48px; }
    .size160 {  160px; height: 160px; }
    .size184 {  184px; height: 114px; }
    .size190 {  190px; height: 190px; }
    .size196 {  196px; height: 196px; }
    .size233 {  233px; }
    /*边距
    ******************************/
    .m0 { margin: 0!important; }
    .m10 { margin:10px; }
    .m15 { margin:15px !important; }
    .m30 { margin:30px; }
    .mt5 { margin-top:5px; }
    .mt10 { margin-top:10px !important; }
    .mt15 { margin-top:15px; }
    .mt20 { margin-top:20px !important; }
    .mt30 { margin-top:30px !important; }
    .mt50 { margin-top:50px !important; }
    .mt100 { margin-top:100px; }
    .mb5 { margin-bottom:5px !important; }
    .mb10 { margin-bottom:10px !important; }
    .mb15 { margin-bottom:15px; }
    .mb20 { margin-bottom:20px; }
    .mb30 { margin-bottom:30px !important; }
    .mb50 { margin-bottom:50px; }
    .mb100 { margin-bottom:100px; }
    .ml5 { margin-left:5px!important; }
    .ml10 { margin-left:10px!important; }
    .ml15 { margin-left:15px; }
    .ml20 { margin-left:20px; }
    .ml30 { margin-left:30px; }
    .ml50 { margin-left:50px; }
    .ml100 { margin-left:100px !important; }
    .ml200 { margin-left:200px !important; }
    .mr5 { margin-right:5px !important; }
    .mr10 { margin-right:10px !important; }
    .mr15 { margin-right:15px !important; }
    .mr20 { margin-right:20px; }
    .mr30 { margin-right:30px !important; }
    .mr50 { margin-right:50px !important; }
    .mr100 { margin-right:100px; }
    /*边距
    ******************************/
    .p10 { padding:10px; }
    .p15 { padding:15px; }
    .p30 { padding:30px; }
    .pt5 { padding-top:5px; }
    .pt10 { padding-top:10px; }
    .pt15 { padding-top:15px; }
    .pt20 { padding-top:20px; }
    .pt30 { padding-top:30px; }
    .pt50 { padding-top:50px; }
    .pt100 { padding-top:100px; }
    .pb5 { padding-bottom:5px; }
    .pb10 { padding-bottom:10px; }
    .pb15 { padding-bottom:15px; }
    .pb20 { padding-bottom:20px !important; }
    .pb30 { padding-bottom:30px; }
    .pb50 { padding-bottom:50px; }
    .pb100 { padding-bottom:100px; }
    .pl5 { padding-left:5px; }
    .pl10 { padding-left:10px; }
    .pl15 { padding-left:15px; }
    .pl20 { padding-left:20px; }
    .pl30 { padding-left:30px; }
    .pl50 { padding-left:50px; }
    .pl100 { padding-left:100px; }
    .pr5 { padding-right:5px; }
    .pr10 { padding-right:10px; }
    .pr15 { padding-right:15px; }
    .pr20 { padding-right:20px; }
    .pr30 { padding-right:30px; }
    .pr50 { padding-right:50px; }
    .pr100 { padding-right:100px; }
    .hr { font-size: 1px; display: block; height: 0; margin: 12px 0; border-top: 1px solid #E3E3E3; overflow: hidden; }
    .hr-double { height: 1px; border-top: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3; }
    .hr8 { margin: 8px 0 !important; }
    .hr12 { margin: 12px 0 !important; }
    .hr16 { margin: 16px 0 !important; }
    .hr18 { margin: 18px 0 !important; }
    .hr24 { margin: 24px 0 !important; }
    .hr32 { margin: 32px 0 !important; }
    .hr.dotted { border-top-style: dotted; }
    .hr-double.dotted { border-bottom-style: dotted; }
    /* =====================
     * 表单元素格式化及伪类效果
     * ===================== */
    input[type="text"], input[type="password"], input.text, input.password { font: 12px/20px Arial; color: #777; background-color: #FFF; vertical-align: top; display: inline-block; height: 20px; padding: 6px 8px; border: solid 1px #E6E9EE; outline: 0 none; }
    input[type="text"]:focus, input[type="password"]:focus, input.text:focus, input.password:focus, textarea:focus { color: #333; border-color: #CCD0D9; outline: 0 none; }
    input[type="text"].error, input[type="password"].error, textarea.error { border: dashed 1px #ED5564; outline: 0 none; }
    textarea, .textarea { font: 12px/18px Arial; color: #777; background-color: #FFF; vertical-align: top; display: inline-block; height: 54px; padding: 6px 8px; border: solid 1px #CCD0D9; outline: 0 none; }
    select, .select { color: #777; background-color: #FFF; height: 34px; vertical-align: middle; *display: inline;
    padding: 8px 8px; border: solid 1px #E6E9EE; *zoom:1;
    }
    select option, .select option { line-height: 22px; display: block; height: 22px; padding: 8px 8px; }
    /* input[type="radio"], .radio { vertical-align: middle; display: inline-block; margin-right: 5px; } */
    .submit-border { vertical-align: middle; display: inline-block; *display: inline/*IE6,7*/;
    *zoom: 1;
    }
    input[type="submit"], input.submit, a.submit { font-size: 12px; line-height: 30px; font-weight: bold; color: #FFF; background-color: #48CFAE; display: block; height: 30px; padding: 0 20px; border-radius: 3px; border: none 0; cursor: pointer; }
    input[type="submit"]:hover, input.submit:hover, a.submit:hover { text-decoration: none; color: #FFF; background-color: #36BC9B; }
    input[type="file"] { line-height:20px; background-color:#FBFBFB; height: 20px; border: solid 1px #D8D8D8; cursor: default; }
    .add-on { line-height: 28px; background-color: #F6F7Fb; vertical-align: top; display: inline-block; text-align: center;  28px; height: 28px; border: solid #E6E9EE; border- 1px 1px 1px 0; }
    .add-on {
    *display: inline/*IE6,7*/; zoom:1; }
    .add-on i { font-size: 14px; color: #434A54; *margin-top: 8px/*IE7*/;
    margin-right: 0!important; }
    /*表单验证错误提示文字*/
    label.error { font-size: 12px; color: #ED5564 !important; margin-left: 8px; }
    label.error i { margin-right: 4px; }
    /* 常用标准按钮样式定义
    -------------------------------------------*/
    a.ncbtn-mini, a.ncbtn { font: normal 12px/20px "microsoft yahei", arial; color: #FFF; background-color: #CCD0D9; text-align: center; vertical-align: middle; display: inline-block; *display: inline;
    height: 20px; padding: 5px 10px; border-radius: 3px; cursor: pointer; *zoom: 1;
    }
    a.ncbtn-mini { line-height: 16px; height: 16px; padding: 3px 7px; border-radius: 2px; }
    a.ncbtn { height: 20px; padding: 5px 10px; border-radius: 3px; }
    a:hover.ncbtn-mini, a:hover.ncbtn { text-decoration: none; color: #FFF; background-color: #AAB2BD; }
    a.ncbtn-mini i, a.ncbtn i { font-size: 14px !important; vertical-align: middle; margin: 0 4px 0 0 !important; }
    /*葡萄柚红*/
    a.ncbtn-grapefruit { background-color: #ED5564; }
    a:hover.btn-grapefruit, a:hover.ncbtn-grapefruit { background-color: #DB4453; }
    /*白英橘*/
    a.ncbtn-bittersweet { background-color: #FB6E52; }
    a:hover.btn-bittersweet, a:hover.ncbtn-bittersweet { background-color: #E9573E; }
    /*向日葵黄*/
    a.ncbtn-sunflower { color: #000; background-color: #FFCE55; }
    a:hover.btn-sunflower, a:hover.ncbtn-sunflower { color: #000; background-color: #F6BB43; }
    /*青草绿*/
    a.ncbtn-grass { background-color: #A0D468; }
    a:hover.btn-grass, a:hover.ncbtn-grass { background-color: #8CC051; }
    /*薄荷绿*/
    a.ncbtn-mint { background-color: #48CFAE; }
    a:hover.btn-mint, a:hover.ncbtn-mint { background-color: #36BC9B; }
    /*水绿*/
    a.ncbtn-aqua { background-color: #4FC0E8; }
    a:hover.btn-aqua, a:hover.ncbtn-aqua { background-color: #3BAEDA; }
    /*牛仔蓝*/
    a.ncbtn-bluejeansjeans { background-color: #5D9CEC; }
    a:hover.btn-bluejeans, a:hover.ncbtn-bluejeansjeans { background-color: #4B89DC; }
    /*薰衣草紫*/
    a.ncbtn-lavander { background-color: #AC92ED; }
    a:hover.btn-lavander, a:hover.ncbtn-lavander { background-color: #967BDC; }
    /*玫瑰粉*/
    a.ncbtn-lavander { background-color: #EC87BF; }
    a:hover.btn-lavander, a:hover.ncbtn-lavander { background-color: #D870AD; }
    /*浅灰色*/
    a.ncbtn-lightgray { color: #656D78; background-color: #F6F7FB; }
    a:hover.btn-lightgray, a:hover.ncbtn-lightgray { color: #434A54; background-color: #E6E9EE; }
    /*中灰色*/
    a.ncbtn-mediumgray { background-color: #CCD0D9; }
    a:hover.btn-mediumgray, a:hover.ncbtn-mediumgray { background-color: #AAB2BD; }
    /*灰黑*/
    a.ncbtn-darkgray { background-color: #656D78; }
    a:hover.btn-darkgray, a:hover.ncbtn-darkgray { background-color: #434A54; }
    /* 全局布局 */
    .container_page {
       1200px;
      margin: 0 auto;
    }
    .ignore {
      overflow:hidden; /*超出的部分隐藏起来*/
      white-space:nowrap; /*不显示的地方用省略号...代替*/
      text-overflow:ellipsis; /* 支持 IE */
      word-wrap:break-word;
      word-break:break-all;
    }
    ._bottom {
      user-select: none !important; 
      background: #1466d2 !important; 
      color: #fff !important; 
      cursor: pointer;
      padding: 7px 14px; 
      border-radius: 4px;
    }
    ._bottom:hover {
      color: #ffefef !important;
      background: #1d70de !important;
    }
    /* checkbox */
    input[type="checkbox"]{
      20px;
      height:20px;
      display: inline-block;
      text-align: center;
      vertical-align: middle; 
      line-height: 18px;
      position: relative;
    }
    input[type="checkbox"]::before{
      content: "";
      position: absolute;
      top: 0;left: 0;
      background: #fff;
       100%;height: 100%;
      border: 1px solid #d9d9d9
    }
    .divCheckbox:checked::before{
      content: "2713";
      background-color:#fff;
      position: absolute;top: 0;
      left: 0;100%;
      border: 1px solid #1868D2;
      color:#1868D2;
      font-size: 20px;
      font-weight: bold;
    } 
    /* 
    /*取紧邻input的下一个label  radio*/
    input[type="radio"]+label{
       14px;height: 14px;
      display: inline-block;
      border: 1px solid #189cfb;
      border-radius: 50%;
      text-align: center;
      line-height: 14px;
      margin-right: 5px;
    }
    input[type="radio"]{
      display: none;
    }
    input[type="radio"]+label:after{
      transition: 0.3s;
      transform: scale(0.8);
      content: '';
      display: inline-block;
       10px;height: 10px;border-radius: 50%;
      background-color: #fff;
    }
    
    input[type="radio"]:checked+label:after{
      background-color: #189cfb;transform: scale(1);
    }
    
    /*不可选中*/
    input[type="radio"]:disabled+label{
      border-color: #aaa;
    }
    input[type="radio"]:disabled+label+label{
      color: #aaa;text-decoration: line-through;
    }
    

      

  • 相关阅读:
    rabbitmq的三种减缓及模式
    webpack的安装与使用
    vue使用脚手架vuecli
    mybatisplus自动生成代码
    vuerouter的使用
    vue不用脚手架
    vue不用脚手架2
    vue2 mock使用
    整合elementUI
    vue项目中进度条(步骤进度条)和tag标签页的对象对应链条切换...
  • 原文地址:https://www.cnblogs.com/qq364735538/p/12877690.html
Copyright © 2020-2023  润新知