如何修改 input 输入框光标的颜色?

          
1
2
3
          input {
    caret-color: skyblue;
}

        

如何修改 placeholder 的颜色？

          
1
2
3
          input:-webkit-input-placeholder {
    color: #ccc;
}

        

移动端输入框获取焦点时显示搜索按钮？

          
1
2
3
          <form>
    <input type="search" />    
</form>

        

移动端键盘如何显示纯数字？

          
1
2
3
4
5
6
7
8
9
          <!-- 第一种方法 -->
<form>
    <input type="tel" />
</form>

<!-- 第二种方法 -->
<form>
    <input type="text" pattern="[0-9]*" />
</form>

        

input如何自动获取焦点？

          
1
          <input type="text" autofocus="autofocus" />

        

IOS移动端自动关闭首字母大写？

          
1
          <input type="text" autocapitalize="off" />

        

禁止长按保存图片？

          
1
2
3
          img {
    -webkit-touch-callout: none;
}

        

禁止长按选中文字？

          
1
2
3
          body {
    -webkit-user-select: none;
}

        

如何去掉 button 按钮触摸时产生的半透明遮罩？

          
1
2
3
          a, button {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

        

文本域的 placeholder 如何换行？

常用转义字符表

          
1
2
          <!-- 使用转义字符 &#10; -->
<textarea placeholder="文本域的 placeholder 如何换行, &#10;你明白了嘛?"></textarea>

        

谷歌浏览器如何显示更小的字体？

          
1
2
3
4
5
6
          /* 使用transform进行缩放 */

span {
    font-size: 10px;
    transform: scale(0.8);
}