The key to activating mobile web with CSS styles, such as Apple mobile phones, is webcss.

The key to activating mobile web with CSS styles, such as Apple mobile phones, is webcss.

The question has been entangled for nearly an hour. Why? You can see it.

There is such an interaction in the company's business travel Web mobile version project, and it needs to imitate the switch that comes with the iphone. Well, there is certainly no problem.

Tip:Use Chrome to view the following cases

Click here to view the instance display

Write and write the html code:

                                                   <span class="onoff"><label><i></i></label></span>

Then, write and write the css code, but there will always be such a problem:

Cause: Write the outer layeroverflow:hiddenBut it was not truncated internally, because it was rounded, so this problem plagued for a while, and later found that this problem does not exist in Firefox, but this does not solve this problem, because this is a mobile project, there is nothing about Firefox.

Search, search, find, and find a good solution to this problem:-webkit-mask-imageIn chrome!

ButThis problem was not solved when the iphone was tested. so, we can be sure that the browser in IOS5 has not yet achieved good support for-webkit-mask-image.

Continue searching. I only believe in English this time. The search term is"webkit overflow hidden", OK. The first one is to view the desired result.

I looked at the code and it was very concise, but it seems that my problem was still not solved. Then I changed my mindpositionTry removing the element. The result can be solved only when all position attributes of the outer and internal elements are removed.

Conclusion:The position attribute of css will invalidate the overflow of the core webkit browser.

Well, I won't talk about the previous writing method here, because the position of css is used in a lot to locate the module, leading to overflow failure. In view of this, the following is the css part for changing the writing method:

.onoff{
overflow: hidden;
display: inline-block;
margin:0 0 -5px 15px;
width: 60px;height:20px;
border-radius: 20px;
border: solid 1px #999;
}
.onoff label{
display: block;
margin-left: -40px;
width: 100px;height: 20px;
text-align: right;color: #8B8B8B;border-radius:20px;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#DFDFDF),color-stop(1,#FEFEFE));
}
.onoff label::after{
position: relative;left:-17px;top: -20px;
display: inline-block;
content: '';width: 6px;height: 6px;
border: solid 2px #999;
border-radius: 10px;
}
.onoff i{
display: block;
width: 60px;height: 20px;
border-radius:20px;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FE7D00),color-stop(1,#FEA753));
}
.onoff i::before{
position: relative;top: -7px;left:-15px;
display: inline-block;
content: '';width: 2px;height: 10px;
background-color: #fff;
}
.onoff i::after{
position: relative;top: -1px;left:1px;
display: inline-block;
content: '';width: 20px;height: 20px;
border: solid 1px #999;
border-radius: 50px;
background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#DADADA),color-stop(1,#FAFAFA));
box-shadow: inset 0 0 1px #fff;
}

Click here to view the instance display

Well, if you have a better solution to the problem, you can leave a message and exchange a message. Mobile web is still very interesting.

Love classroom-professional front-end HTML5 training institutions

Alibaba Cloud's classroom is dedicated to front-end training with a pure dry-working attitude, so that every basic student can truly get started to master.

If you want to learn the front-end, you can click the word "success ".

For more information, see QQ2189877100.

Front-end interest tribe, welcome to follow