# 高频实用片段

# 解决图片5px间距的方法

方案1：给父元素设置font-size: 0；
方案2：给img设置display: block；
方案3：给img设置vertical-align: bottom
方案4：给父元素设置line-height: 5px;

# 修改input placeholder样式

<input type="text" class="placehoder-custom" placeholder="请输入用户名搜索">
<input type="text" placeholder="请输入用户名搜索">

1
2

input{
  width: 300px;
  height: 30px;
  outline: none;
  display: block;
  margin: 15px;
  border: solid 1px #dee0e9;
  padding: 0 15px;
  border-radius: 15px;
}
/* 多浏览器兼容： */
.placehoder-custom::-webkit-input-placeholder{ /* WebKit, Blink, Edge */
  color: #909;
}
.placehoder-custom:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: #909;
}
.placehoder-custom::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: #909;
}
.placehoder-custom:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: #909;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# input type="number"尾部的箭头

input::-webkit-inner-spin-button { 
  -webkit-appearance: none;
}

1
2
3

# input radio/checkbox 样式修改

radio/checkbox

.user-defined-input:checked {
        background:#3B3C3D;
}
.user-defined-input {
  width:25px;
  height:25px;
  background-color:rgba(0, 0, 0, 0);
  border:solid 1px #dddddd;
  -webkit-border-radius:50%;
  border-radius:50%;
  font-size:0.8rem;
  margin:0;
  padding:0;
  position:relative;
  display:inline-block;
  vertical-align:top;
  cursor:default;
  -webkit-appearance:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-transition:background-color ease 0.1s;
  transition:background-color ease 0.1s;
}
.user-defined-input:checked::after {
  content:'';
  top:5px;
  left:5px;
  position:absolute;
  background:transparent;
  border:#fff solid 2px;
  border-top:none;
  border-right:none;
  height:6px;
  width:10px;
  -moz-transform:rotate(-45deg);
  -ms-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  transform:rotate(-45deg);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

男女

# 改变光标颜色

.input {
  caret-color: #ffd476;
}

1
2
3
4

# 水平垂直居中

.parent{
  display: flex;
  align-items: center;
  justify-content: center;
}

1
2
3
4
5

# 单行文本溢出显示省略号

.one-line-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

1
2
3
4
5

# 多行文本溢出显示省略号

.more-line-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 设置n行，也包括1 */
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

1
2
3
4
5
6
7
8

# 网页哀悼模式

.body {
  -webkit-filter: grayscale(100%); /* webkit */
  -moz-filter: grayscale(100%); /*firefox*/
  -ms-filter: grayscale(100%); /*ie9*/
  -o-filter: grayscale(100%); /*opera*/
  filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
  filter:gray; /*ie9- */
}

1
2
3
4
5
6
7
8
9

# 禁止选择文本

.article{ 
  user-select: none;
}

1
2
3

# 自定义文本选中的样式

.article::selection { 
  color: #ffffff; 
  background-color: #ff4c9f;
}

1
2
3
4

# 隐藏滚动条

<div class="box">
  <div>   
    爱情会离开，朋友会离开，快乐会离开，但是考试不会,因为你不会就不会 
  </div>
</div>

<div class="box box-hide-scrollbar"> 
  <div>只是因为在人群中多看了你一眼，你就--问我游泳健身了解一下？</div>
</div>

1
2
3
4
5
6
7
8
9

.box { 
  width: 375px; 
  overflow: scroll;
}

/* 关键代码 */
.box-hide-scrollbar::-webkit-scrollbar {  
  display: none; /* Chrome Safari */
}

.box > div { 
  margin-bottom: 15px; 
  padding: 10px; 
  background-color: #f5f6f9;
  border-radius: 6px; 
  font-size: 12px; 
  width: 750px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

← 其他 CSS 效果 →