随笔小记

移动端 滑动流畅

{
    overflow: auto;
    -webkit-overflow-scroll: touch;
}

input 等兼容汇总

伪元素表单控件默认样式重置与自定义大全

去掉原生的 input[type="text"] 的样式

{
    -webkit-appearance: none;
    -webkit-box-shadow: none;
      box-shadow: none;

    -moz-appearance: none;
     -ms-appearance: none;
         appearance: none;
}

type为search的input,去掉原生close按钮

#Search::-webkit-search-cancel-button
{
    display: none;    
}

取消textarea的拖动改变大小的功能

textarea{
    resize:none;
}

有关input的兼容性设置

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
input[type="search"] {
    -webkit-box-sizing: content-box;
       -moz-box-sizing: content-box;
            box-sizing: content-box;
    -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

设置全部的标签 统一样式

* {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          -webkit-touch-callout: none;
}

习惯性 用的盒模型

{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; 
}

table表格

{
    border-collapse: collapse;
    border-spacing: 0;
}

contenteditable属性的div的placeholder

我们有时候用带有contenteditable属性的div而不是input或者textarea来作为输入框。比如，div可以根据内容自动调整高度。但是div元素不支持placeholder属性。怎么在div内容为空的时候显示一个默认文字呢？可以利用:empty伪类。

<div class="input" contenteditable="true" placeholder="请输入文字"></div>
.input:empty::before {
    content: attr(placeholder);
}

使用CSS中的伪类就可以实现 监听输入框的change和focus事件

<input type="text" class="input" required>
<div class="like">点赞</div>
<div class="send">发送</div>
.send {
  display: none;
}
 
.input:focus ~ .send {
  display: block;
}
 
.input:valid ~ .send {
  display: block;
  color: red;
}
 
 
.input:focus ~ .like, .input:valid ~ .like {
  display: none;
}

纯CSS实现Tab切换

主要是利用了单选框元素的:checked伪类和相邻选择器。因为是单选框，所以保证了同一时间只有一个tab处于激活状态。

<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">TAB1</label>
<input id="tab2" type="radio" name="tabs">
<label for="tab2">TAB2</label>

<div id="content1" class="tab-content">CONTENT1<div>  
<div id="content2" class="tab-content">CONTENT2</div>
input, .tab-content{
    display: none;
}
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
    display: block;
}

感知子元素的个数

.list li:nth-last-child(n+4) ~ li,
.list li:nth-last-child(n+4):first-child {
  color: red
}

:nth-last-child(n+4)这一个选择器的意思就是倒数第四个以及之前的元素，后面加了~ li，就是表示符合前面条件的元素之后的li元素。

如果元素总数不足4，则不会存在符合:nth-last-child(n+4)的元素（一共没有四个，也就不存在倒数第四个），那么li:nth-last-child(n+4) ~ li就不会选择任何的元素了。

但是如果只用~ li，是不会匹配到第一个li的，所以又加上了li:nth-last-child(n+4):first-child。

这样也就实现了根据元素个数的多少来应用不同的样式。

单行显示，溢出自动截取（省略号显示）

{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}