CSS 几个小技巧

今天无意浏览一篇 关于css 修改默认样式的用心文章,怕后期用到的时候找不到,特搬运了过来

  1. 设置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. 去掉 input 默认样式
input {
    outline: none;
    border: none;
    background-image: none;
    cursor: text;
}
  1. 设置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. 修改 select 默认样式
select {
   appearance:none;
   -moz-appearance:none;
   -webkit-appearance:none;
   background: url('./Group.png') no-repeat right;
}
  1. 让文字不被选中
.text {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
  1. 如何让图片不被选中
img {
  -moz-user-select: none;   
  -webkit-user-select: none;
  -ms-user-select: none;   
  -khtml-user-select: none;   
  user-select: none;  
}
  1. 单词换行
.word {
    word-wrap: break-word;
    word-break: break-all;
}
  1. 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. 文字过多三点显示隐藏
/*单行三点隐藏*/
.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; 
}

最后附上原文作者地址

你可能感兴趣的:(CSS 几个小技巧)