1. 修改 placeholder 及兼容处理
- ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
- color: red;
- }
- :-moz-placeholder {/* Firefox 18- */
- color: red;
- }
- ::-moz-placeholder{/* Firefox 19+ */
- color: red;
- }
- :-ms-input-placeholder { /* Internet Explorer 10-11 */
- color: red;
- }
- 2.cursor
cursor: not-allowed; 鼠标变成 "无法点击" 的样式
3. 文字溢出隐藏, 并且显示为省略号
overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
4. 去除 input 默认的 X 号和小眼睛
5. 纯数字或字母不自动换行
Word-break: break-all;
6. 个别电脑上的个别浏览器界面样式错乱问题
可能性之一是这台电脑上的浏览器有一些插件, 和样式的类名有冲突.
7. 优雅的增加 icon 按钮点击区域
- .icon- bigger {
- width: 16px;
- height: 16px;
- border: 11px solid transparent; /** 点击区域大小从 16*16 提升到了 38*38**/
- }
来源: http://www.jianshu.com/p/13bb9bf18bfd