2018-12-13 09:58:10 qq_39019768 阅读数 46

(1)在h5页面写弹出密码框,input光标不能隐藏

input{
    opacity: 0;/*ios下失效*/
    /*解决办法*/
    text-indent: -999em; /*文本向左缩进*/
    margin-left: -100%; /*输入框光标起始点向左左移*/
}

(2) 输入密码的时候ios不能调用手机键盘(不能自动聚焦,暂时手动点击调用)

(3)密码框弹出定位(fixed)input光标下移

body{
    /*解决办法*/
    position: fixed;
    width: 100%;
}

(4)background-attachment:fixed不兼容性

body:before {
    content: ' ';
    display: block;
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(path) no-repeat;
    background-size: cover;
}

 

2016-08-24 17:09:51 voidmain_123 阅读数 2997

Css代码如下

        .al-toggle-button{
            appearance: none;
            -webkit-appearance: none;
            position: relative;
            width: 52px;
            height: 32px;
            background: #dfdfdf;
            border-radius: 16px;
            border: 1px solid #dfdfdf;
            outline: 0;
            box-sizing: border-box;
        }
        .al-toggle-button:checked{
            border-color: #04be02;
            background-color: #04be02;
        }
        .al-toggle-button:before, .al-toggle-button:after{
            content: " ";
            position: absolute;
            top: 0;
            left: 0;
            height: 30px;
            border-radius: 15px;
            transition: transform 0.3s;
            transition: -webkit-transform 0.3s;
            transition: transform 0.3s, -webkit-transform 0.3s;
            -webkit-transition: -webkit-transform 0.3s;
        }
        .al-toggle-button:before{
            width: 50px;
            background-color: #fdfdfd;
        }
        .al-toggle-button:after{
            width: 30px;
            background-color: white;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        }
        .al-toggle-button:checked:before{
            transform: scale(0);
            -webkit-transform: scale(0);
        }
        .al-toggle-button:checked:after{
            transform: translateX(20px);
            -webkit-transform: translateX(20px);
        }

HTML中引用

<input type="checkbox" class="al-toggle-button">

效果图~~
关闭状态
这里写图片描述

2015-09-07 18:12:21 a46262563 阅读数 1162

纯css实现仿ios表单开关

  • 看看效果图
    这里写图片描述

  • html结构如下:

<label class="maple-checkbox">
        <input type="checkbox" class="ios-switch red bigswitch" checked />
        <div><div></div></div>
    </label>
  • css内容:
/*表单开关样式*/
.maple-checkbox input[type="checkbox"]
{
    position: absolute;
    opacity: 0;
}
/* Normal Track */
input[type="checkbox"].ios-switch + div
{
    vertical-align: middle;
    width: 40px;
    height: 20px;
    border: 1px solid rgba(0,0,0,.4);
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-transition-duration: .4s;
    -webkit-transition-property: background-color, box-shadow;
    box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
    margin: 25px 1.2em 15px 2.5em;
}

/* Normal Knob */
input[type="checkbox"].ios-switch + div > div
{
    float: left;
    width: 18px;
    height: 18px;
    border-radius: inherit;
    background: #ffffff;
    -webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
    -webkit-transition-duration: 0.4s;
    -webkit-transition-property: transform, background-color, box-shadow;
    -moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
    -moz-transition-duration: 0.4s;
    -moz-transition-property: transform, background-color;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    margin-top: 1px;
    margin-left: 1px;
}

/* Big Track */
input[type="checkbox"].bigswitch.ios-switch + div
{
    width: 60px;   /*开关宽度*/
    height: 28px;  /*开关高度*/
}

/* Big Knob */
input[type="checkbox"].bigswitch.ios-switch + div > div
{
    width: 25px;    /*按钮宽度*/
    height: 25px;   /*按钮高度*/
    margin-top: 1px;
}
/* Checked Big Knob (Blue Style) */
input[type="checkbox"].bigswitch.ios-switch:checked + div > div
{
    -webkit-transform: translate3d(34px, 0, 0); /*控制按钮的左右*/
    -moz-transform: translate3d(34px, 0, 0);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
}

/*改变颜色的*/
input[type="checkbox"].red.ios-switch:checked + div
{
    background-color: #f85200;
    border: 1px solid rgba(248, 82, 0,1);
    box-shadow: inset 0 0 0 10px rgba(248,82,0,1);
}
input[type="checkbox"].red.ios-switch:checked + div > div
{
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(248, 82, 0,1);
}

注意:

1.修改默认的组件,一般用label层套住该组件

2.该样式主要用到三个类:ios-switch(控制开关的显示样式)、red(控制开关的颜色)、bigswitch(控制开关的大小),可以修改相应的css来定制你需要的开关样式。

3.修改代码中注释的地方调节开关的大小和颜色


Demo地址:

http://download.csdn.net/detail/a46262563/9086435

2016-07-26 16:15:06 bomess 阅读数 3451

前言

HTML5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了

整个实现挺简单的,请看Demo及注释。

效果

这里写图片描述

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS3模拟IOS开关</title>
    <style type="text/css" media="screen">
       /* ==========================================================================
                        设置根元素字体大小
       ========================================================================== */
        html {
            font-size: 100px;
        }
        /* ==========================================================================
                        设置模拟元素的包裹层,装饰...毫无卵用
       ========================================================================== */
       .ios-checkbox{
            height:4rem;
            width:4rem;
            position:absolute;
            left:50%;
            top:50%;
            -webkit-transform:translate(-50%, -50%);
                    transform:translate(-50%, -50%);
            border:.05rem dashed #3DB7A9;
            display:-webkit-box;
            display:-webkit-flex;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-orient:horizontal;
            -webkit-box-direction:normal;
            -webkit-flex-direction:column;
                -ms-flex-direction:column;
                    flex-direction:column;
            -webkit-flex-wrap:nowrap;
                -ms-flex-wrap:nowrap;
                    flex-wrap:nowrap;
            -webkit-justify-content:space-around;
                -ms-flex-pack:distribute;
                    justify-content:space-around;
            -webkit-box-align:center;
            -webkit-align-items:center;
                -ms-flex-align:center;
                    align-items:center;
       }
        /* ==========================================================================
                    label标签模拟按钮         
       ========================================================================== */
        .emulate-ios-button {
            display: block;
            width: 2rem;
            height: 1rem;
            background: #ccc;
            border-radius: 5rem;
            cursor: pointer;
            position: relative;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
        }

        /* ==========================================================================
                    设置伪类,来实现模拟滑块滑动,过渡用了transition来实现 ,
                    translateZ来强制启用硬件渲染   
       ========================================================================== */
       
        .emulate-ios-button:after {
            content: '';
            display: block;
            width: .9rem;
            height: .9rem;
            border-radius: 100%;
            background: #fff;
            box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
            position: absolute;
            left: .05rem;
            top: .05rem;
            -webkit-transform:translateZ(0);    
            transform:translateZ(0);
            -webkit-transition: all .3s ease;  
            transition: all .3s ease;
        }
        
        .emulate-ios-button:active:after {
            width: 1.1rem;
        }

      /* ==========================================================================
                    设置raw-checkbox,视觉直观比较 
       ========================================================================== */
        .raw-checkbox{
            height:2rem;
            width:2rem;
        }
        
        .raw-checkbox:checked+label {
            background: #34bf49;
        }
        
        /* 这里是伪元素偏移,初始是0.9+0.05 ,所以这里1.05rem */
        .raw-checkbox:checked+label:after {
            left: 1.05rem;
        }
        
        .raw-checkbox:checked+label:active:after {
            left: .5rem;
        }
        
        
        .raw-checkbox:disabled+label {
            background: #d5d5d5;
            pointer-events: none;
        }
        
        .raw-checkbox:disabled+label:after {
            background: #bcbdbc;
        }
        
    </style>
</head>

<body>
    <div class="ios-checkbox">
        <input type="checkbox" id="ios-checkbox" name="emulate-ios-button" class="raw-checkbox">
        <label for="ios-checkbox" class="emulate-ios-button"></label>
    </div>
</body>

</html>

总结

为了更直观的比较,raw checkbox我就没有隐藏了

2012-05-15 15:43:01 Triumph 阅读数 6197

iOS 的图标上显示通知的数字:




下面代码就是用 CSS 模仿数字的样式:

/*********************************************************/
/** 仿 iOS 系统通知数字样式 **/
span.num{
	background-color: #f00;
	background-image: -webkit-linear-gradient(top, #f00, #600); /* Chrome 10+, Saf5.1+, iOS 5+ */
	background-image:    -moz-linear-gradient(top, #f00, #600); /* FF3.6+ */
	background-image:     -ms-linear-gradient(top, #f00, #600); /* IE10 */
	background-image:      -o-linear-gradient(top, #f00, #600); /* Opera 11.10+ */	
	color:#fff;
	font-family:Verdana;
	font-weight:normal;
	padding:2px 5px;
	border:3px solid #fff;
	border-radius:15px;
	position:absolute;
	margin-top:-20px;
	margin-left:-10px;
	box-shadow: 0 2px 3px 0px rgba(0,0,0,1);
	text-shadow: -1px -1px 0 #000;
}
/*********************************************************/

用法:

<a href="#"><img src="..."/><span class="num">10</span></a>


没有更多推荐了,返回首页