CSS 几个小技巧

作者: 晚安_bd35 | 来源:发表于2019-06-13 16:36 被阅读0次

CSS 几个小技巧
几个常用CSS小技巧
CSS中的几个小技巧
笔记1
几个常用的CSS布局小技巧
提高代码执行效率的几个小技巧
CSS小技巧
css小技巧
css小技巧
css小技巧

今天无意浏览一篇关于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;
}

去掉 input 默认样式

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

设置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;
}

修改 select 默认样式

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

让文字不被选中

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

如何让图片不被选中

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

单词换行

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

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);
}

文字过多三点显示隐藏

/*单行三点隐藏*/
.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; 
}

最后附上原文作者地址