CSS常用系列整理

  • ios 滑动不流畅
1
-webkit-overflow-scrolling: touch;
  • 修改 chrome 记住密码后自动填充表单的黄色背景
1
2
3
4
5
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: rgb(250, 255, 189); /* #FAFFBD; */
  background-image: none;
  color: rgb(0, 0, 0);
}
  • 让页面里的字体变清晰，变细用 CSS 怎么做
1
-webkit-font-smoothing: antialiased;
  • 自定义滚动条
1
2
3
4
5
6
7
::-webkit-scrollbar                滚动条整体部分
::-webkit-scrollbar-thumb          滚动条里面的小方块，能向上向下移动（或向左向右移动）
::-webkit-scrollbar-track          滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button         滚动条的轨道的两端按钮，由于通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece    内层轨道，滚动条中间部分
::-webkit-scrollbar-corner         边角，即垂直滚动条和水平滚动条相交的地方
::-webkit-resizer                  两个滚动条的交汇处上用于拖动调整元素大小的小控件
  • 文本竖向排列
1
writing-mode: vertical-rl | vertical-lr
  • 文本两端对齐
1
text-align-last:justify

  • ios 下 input 光标变大问题
    ;

    需要把行高和字体大小设置成一样的

  • ios 下引入 fastclick 后点击失效问题

1
2
3
4
// 简单粗暴的做法
FastClick.prototype.focus = function(targetElement) {
    targetElement.focus();
};
  • placeholder 颜色
1
2
3
4
5
6
7
8
9
10
11
12
::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {/* Firefox 18- */
  color: red;
}
::-moz-placeholder{/* Firefox 19+ */
 color: red;
}
:-ms-input-placeholder {
  color: red;
}