CSS 代码

[chuiliu]

记录常用的 CSS 代码，以便日后查看

• 继承 box-sizing

html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

• 去除文本框选中时出现的边框

input:focus,
textarea:focus {
    outline: none;
}

• 点击超链接出现灰色背景

a {
    -webkit-tap-highlight-color: transparent;
}

• 修改 placeholder 字体颜色

input:-moz-placeholder {
    color: #ccc;
}
::-webkit-input-placeholder {
    color: #ccc;
}

• 选择从第1个到第3个...

li {
    display: none;
}
li:nth-child(-n+3) {
    display: block;
}

• 重置 button 样式

button {
    outline: none;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}

• 去掉火狐浏览器按钮点击后的虚线框

button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

• 单行文本越界用省略号

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

• 不需要设置元素的宽度，用 white-space: nowrap; 就可以保证一行显示
• 去除 type=number 的小箭头

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}
input[type=number] {
    -moz-appearance: textfield;
}

• 去除 chrome 自动填充表单黄色背景

input::-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset!important;
}

• 重叠连续按钮组的边框

.btn+.btn { 
    margin-left: -1px;
}

• 禁止选择

user-select: none;

• ios9 浏览器，手指在 input 上无法滚动屏幕，大概是个 bug，待确认
• select 默认不选中

<option disabled selected value></option>

• IE6, IE7, IE8 不支持 inherit
• 伪元素 ::before, ::after 的 content 值

/* 可来自元素的data-url属性的值 */
content: attr(data-url);  
/* 可来自图片资源 */
content: url(image/icon.png);  

• letter-spacing 导致文本不居中

/* 单行文本 */
p {
    letter-spacing: 1em;
    text-indent: 1em;
    text-algn: center;
}
/* 多行文本 */
p {
    letter-spacing: 1em;
    padding-left: 1em;
    text-align: center;
}

• 隐藏滚动条

/* chrome, safari, opera */
.wrapper::-webkit-scrollbar {
    display: none;
}
/* ie, edge */
.wrapper {
    -ms-overflow-style: none;
}

• 页面平滑滚动

html {
    scroll-behavior: smooth;
}

• 文本两端对齐

.text-justify {
    text-align: justify;
    text-align-last: justify;
}
.text-justify:after {
    display: inline-block;
    content: '';
    width: 100%;
}