CSS 小技巧 - 不断更新ing

input 一些样式修改

改变 input placeholder 颜色大小

input::-webkit-input-placeholder { 
    color: #babbc1; 
    font-size: 12px; 
}
复制代码

改变 input 光标颜色（caret-color）

input { 
    caret-color: red; 
}
复制代码

outline:none 移除 input 状态线

输入框选中时，默认会带蓝色状态线，使用outline:none 移除

input { 
    outline: none; 
}
复制代码

去掉 input type="number" 尾部箭头

input::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
}
复制代码

flex 布局实现 footer “吸底” 效果

经常列表加载数据的时候，底部会有提示：加载完成或者没有更多内容。当列表数据很少时，想要没有更多内容提示 处于底部，列表数据够多的时候，没有更多内容提示跟在内容最后

🌰 html:

<div class="container">
    <ul class="list">
        <li>列表数据</li>
        <li>列表数据</li>
    </ul> 
    <div class="tip">没有更多内容了</div> 
</div>
复制代码

🌰 CSS：

.container {
  border:5px solid orange;
  height: 400px;
  overflow-y: auto;
  /* 关键 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.list {
  padding:0;
  flex: 1; //关键
}
li{
    border:1px solid #efefef;
    margin:16px;
    padding:16px;
    list-style-type:none;
}
.tip {
  padding: 15px 0;
  text-align: center;
  color: red;
}
复制代码

源码在线：

图片底部莫名其妙多出来 5px 的间距

4种方法按需选择：

1. 给父元素设置 font-size: 0
2. 给 img 设置 display: block
3. 给 img 设置 vertical-align: bottom
4. 给父元素设置 line-height: 5px;

transform: scale(0.8)不生效解决(CSS)

原因： transform: scale(0.8);在行内元素中是不生效的

根据需求可加 display: block; 或者 display: inline-block;

自动填充的 input 背景色修改不生效

加了background-color: transparent !important;也不生效； 加下面的修改也不生效：

input:-internal-autofill-selected {
    background-color: transparent !important;
}
复制代码

最终修改：

input:-internal-autofill-previewed,input:-internal-autofill-selected{
    transition: background-color 5000s ease-in-out 0s !important;
}
复制代码