# CSS 几个小技巧

设置placeholder样式的方法

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #b1b1b1; opacity:1; 
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #b1b1b1;opacity:1;
}

input:-ms-input-placeholder{
    color: #b1b1b1;opacity:1;
}

input::-webkit-input-placeholder{
    color: #b1b1b1;opacity:1;
}

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

去掉 input 默认样式

input {
    outline: none;
    border: none;
    background-image: none;
    cursor: text;
}

1
2
3
4
5
6

设置placeholder样式的方法

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #b1b1b1; opacity:1; 
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #b1b1b1;opacity:1;
}

input:-ms-input-placeholder{
    color: #b1b1b1;opacity:1;
}

input::-webkit-input-placeholder{
    color: #b1b1b1;opacity:1;
}

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

修改 select 默认样式

select {
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;
    background: url('./Group.png') no-repeat right;
}

1
2
3
4
5
6

让文字不被选中

.text {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

1
2
3
4
5

如何让图片不被选中

img {
  -moz-user-select: none;   
  -webkit-user-select: none;
  -ms-user-select: none;   
  -khtml-user-select: none;   
  user-select: none;  
}

1
2
3
4
5
6
7

单词换行

.word {
    word-wrap: break-word;
    word-break: break-all;
}

1
2
3
4

css画叉

.a{ 
  display: inline-block; 
  width: 20px;
  height:5px; 
  background: #ccc;
  line-height:0;
  font-size:0;
  vertical-align:middle;
  -webkit-transform: rotate(45deg);
  position: absolute;
  top: 16px;
  right: 13px;
}
.a:after{
  content:'/';
  display:block;
  width: 20px;
  height:5px; 
  background: #ccc;
  -webkit-transform: rotate(-90deg);
}

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

文字过多三点显示隐藏

// 单行三点隐藏
.one-line {
    white-space: nowrap;
    text-overflow:ellipsis;
    width: 150px;
    overflow: hidden;
}
// 多行三点隐藏
.more-line {
    overflow:hidden; 
    text-overflow:ellipsis;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}

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

Flex布局介绍 →