1、input placeholder字体样式
input::-webkit-input-placeholder {color: #000;}
2、单行超出换行
.single-row-overflow{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
overflow: hidden;
}
这里有个注意事项,在小程序上要实现换行需要在标签上写上
style="-webkit-box-orient: vertical;"
因为这个样式写在样式区域会直接被忽略。^ _ ^
3、多行超出换行
.two-row-overflow{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2; // 行数
text-overflow: ellipsis;
overflow: hidden;
}
注意事项跟第二条相同 0 _ 0
4、滚动条样式设置
&::-webkit-scrollbar{ // 滚动条整体样式
width: 4px;
height: 16px;
background-color: none;
}
&::-webkit-scrollbar-thumb{ // 滚动条里面小方块(就是使用鼠标拖动块)
background:#225BC4;
border-radius: 2px;
}
&::-webkit-scrollbar-track { // 滚动条的轨道
background:none;
}
&::-webkit-scrollbar-button{ // 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
display: none;
}
这四个是比较常用的滚动条伪类,几乎能够满足各种需要滚动条的样式。
当然还有其他滚动条样式伪类,我这里就不列出来了。