.icon_close{
position: absolute;
top: 50%;
right: 0.5rem;
display: inline-block;
width: 0.85rem;
height: 0.1rem;
background: #a3a3a3;
line-height: 0;
font-size: 0;
vertical-align: middle;
-webkit-transform: rotate(45deg);
}
.icon_close:after{
content: '/';
display: block;
width: 0.85rem;
height: 0.1rem;
background: #a3a3a3;
-webkit-transform: rotate(-90deg);
}
.icon_down{
display: inline-block;
position: absolute;
right: 0.25rem;
bottom: 0.9rem;
content: '';
height: 0.6rem;
width: 0.6rem;
box-shadow: 2px 2px #aeaeae;
transform: rotate(135deg);
-webkit-transform: rotate(45deg);
}
.icon_right{
display: inline-block;
position: absolute;
right: 0.5rem;
bottom: 0.9rem;
content: '';
height: 0.6rem;
width: 0.6rem;
box-shadow: 2px 2px #aeaeae;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.icon_up{
display: inline-block;
position: absolute;
right: 0.25rem;
bottom: 0.9rem;
content: '';
height: 0.6rem;
width: 0.6rem;
box-shadow: 2px 2px #aeaeae;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
.icon_left{
display: inline-block;
position: absolute;
right: 0.5rem;
bottom: 0.9rem;
content: '';
height: 0.6rem;
width: 0.6rem;
box-shadow: 2px 2px #aeaeae;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
switch
<div class="switchWrap1 open close" id="J_lpyh_status">
<div class="switchWrap2" id="J_lpyh_switch"></div>
</div>
.switchWrap{
float: right;
text-align: right;
width: 4rem;
height: 2.2rem;
}
.switchWrap1{
width: 2.4rem;
height: 1.2rem;
border-radius: 0.6rem;
position: relative;
top: 0.5rem;
left: 1.6rem;
}
.switchWrap2{
width: 1.1rem;
height: 1.1rem;
border-radius: 0.55rem;
position: absolute;
background: white;
}
Set font size (less than 12px)
html{-webkit-text-size-adjust: none;}
1. Only valid for versions below chrome 27.0, invalid for versions above 27.0;
2. Only valid for English, invalid for Chinese.
In the new version of chrome, it has been forbidden to change the attribute, it is recommended to use the method in CSS3:font-size: 9px; -webkit-transform: scale(0.75); -o-transform: scale(1);
font omitted
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
Remove input default style:
// remove border
input{
outline: none;
}
inout:focus{
outline: none;
}
//Remove the light yellow background when Chrome autofills the form
input:-webkit-autofill {
background-color: rgb(250, 255, 189);
background-image: none;
color: rgb(0, 0, 0);
-webkit-box-shadow: 0 0 0px 1000px white inset;//The first custom style is applied, and the second is used as a control
}
//Remove the default button on the right side of the numeric keypad
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
height: auto;
}
It is more abundant here:
http://www.zhangxinxu.com/wordpress/2013/06/%E4%BC%AA%E5%85%83%E7%B4%A0-%E8%A1%A8%E5%8D% 95%E6%A0%B7%E5%BC%8F-pseudo-elements-style-form-controls/
Vertically centering multiline text
Method 1: Use display:table-cell
<div class="help_box">
<div class="help_cont">
<p>Study hard</p>
<p>Every day up</p>
</div>
</div>
.help_box{
display: table;
width: 100%;
height: 2.75rem;
text-align: center;
font-size: 0.6rem;
}
.help_cont {
vertical-align:middle;
display:table-cell; ;
}
Method 1: Use line-height (center the help_cont container)
<div class="help_box">
<div class="help_cont">
<p>Study hard</p>
<p>Every day up</p>
</div>
</div>
.help_box{
width: 100%;
height: 7.75rem;
line-height: 7.75rem;
}
.help_cont {
display: inline-block;
p{
line-height: 1rem;
}
}
Limit the number of lines of text, the extra text is terminated by an ellipsis
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled document</title>
</head>
<body>
<p style="
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
">
static: The object follows the regular flow. Properties like top, right, bottom, left are not applied. relative: The object follows the regular flow and does not affect any elements in the regular flow when offset by the top, right, bottom, left properties with reference to its position in the regular flow. Absolute: The object is out of the regular flow and is absolutely positioned using properties such as top, right, bottom, left, etc. The offset position of the box does not affect any elements in the regular flow, and its margin does not collapse with any other margin. fixed: The object deviates from the regular flow, and uses top, right, bottom, left and other properties to position the window as a reference point. When the scroll bar appears, the object will not scroll with it. center: The object deviates from the regular flow and uses properties such as top, right, bottom, left to specify the position or size of the box. The box is centered vertically and horizontally in its containing container. The offset position of the box does not affect any element in the regular flow, and its margin does not collapse with any other margin. (CSS3) page: Refer to absolute for the position calculation of the box. The box is inside a paged media or region block, the containing block of the box is always the initial containing block, otherwise it depends on each absolute mode. (CSS3) sticky: The object follows the regular flow when it is normal. It's like a combination of relative and fixed, with regular flow when on screen, and fixed when scrolling offscreen. The performance of this property is the adsorption effect you see in reality. (CSS3) * CSS3 new properties may have description errors and changes, for reference only, continuous update
</p>
</body>
</html>
Reference link:
http://www.css88.com/webkit/-webkit-line-clamp/
Disable default menu (when touching target)
-webkit-touch-callout none： The system default menu is disabled inherit： The system default menu is not disabledReference link: http://www.css88.com/webkit/-webkit-touch-callout/ (with compatibility)