一些不常用的伪元素
一些不常用的伪元素
滚动条样式& -webkit-scrollbar
::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块,能向上向下移动(或往左往右移动,取决于是垂直滚动条还是水平滚动条)
::-webkit-scrollbar-track 滚动条的轨道(里面装有 Thumb)
::-webkit-scrollbar-button 滚动条的轨道的两端按钮,允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道,滚动条中间部分(除去)
::-webkit-scrollbar-corner 边角,即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
@see https://www.xuanfengge.com/demo/201311/scroll/css3-scroll.html
<div class="test test-1">
<div class="scrollbar">
111111111111111111111111111111111
11111111111111111111111111111111111111111111
</div>
</div>
<div class="test test-2">
<div class="scrollbar"></div>
</div>
.test {
width : 50px;
height : 200px;
overflow: auto;
float : left;
margin : 5px;
border : none;
}
.scrollbar {
width : 30px;
height: 300px;
margin: 0 auto;
}
.test-1::-webkit-scrollbar {
/*滚动条整体样式*/
width : 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px;
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #535353;
}
.test-1::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
border-radius: 10px;
background : #ededed;
}
.test-2::-webkit-scrollbar {
/*滚动条整体样式*/
width : 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
.test-2::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius : 10px;
background-color: skyblue;
background-image: -webkit-linear-gradient(
45deg,
rgba(255, 255, 255, 0.2) 25%,
transparent 25%,
transparent 50%,
rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%,
transparent 75%,
transparent
);
}
.test-2::-webkit-scrollbar-track {
/*滚动条里面轨道*/
box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
background : #ededed;
border-radius: 10px;
}
伪元素表单控件默认样式重置与自定义大全
提示
当开发 web 应用程序时,表单样式是个头疼的问题。以前,web 开发人员不得不接受一个现实,就是由客户端浏览器控制表单样式。然而,作者通过伪元素给 web 渲染引擎添加钩子,就可以控制表单的显示。
然而,所有这些伪元素都是依赖于特定浏览器引擎的(所以要带有浏览器引擎前缀),这样方便区分特定的浏览器引擎。以下是我自己搜集整理的,在 Trident, Gecko, 和 WebKit 浏览器引擎下面都可用的伪元素列表。
一些注意点:
这里列出的所有伪元素 IE10 支持,但是他们在 IE 的早期版本不支持
对于 webkit,设置一些伪元素样式,你必须把元素的-webkit-appearance 为 none。例如,
设置::-webkit-progress-bar 样式,你必须给<progress>元素应用-webkit-appearance: none;
<input type="checkbox" /> <input type="radio" />
::-webkit-check {
color: red;
background: black;
padding: 0.5em;
}
<input type="color" />
::-webkit-color-swatch-wrapper {
border: 2px solid red;
}
::-webkit-color-swatch {
opacity: 0.5;
}
<input type="date" />
::-webkit-datetime-edit {
padding: 1em;
}
::-webkit-datetime-edit-fields-wrapper {
background: silver;
}
::-webkit-datetime-edit-text {
color: red;
padding: 0 0.3em;
}
::-webkit-datetime-edit-month-field {
color: blue;
}
::-webkit-datetime-edit-day-field {
color: green;
}
::-webkit-datetime-edit-year-field {
color: purple;
}
::-webkit-inner-spin-button {
display: none;
}
::-webkit-calendar-picker-indicator {
background: orange;
}
<input type="file" value="选择" />
::-webkit-textfield-decoration-container {
background: black;
color: red;
padding: 1em;
}
::-webkit-inner-spin-button {
background: black;
color: red;
padding: 1em;
}
<input type="number" />
::-webkit-textfield-decoration-container {
}
::-webkit-inner-spin-button {
-webkit-appearance: none;
}
::-webkit-outer-spin-button {
-webkit-appearance: none;
}
<input type="password" />
::-webkit-reveal {
display: none;
}
<input placeholder="placeholder" />
::-webkit-input-placeholder {
color: blue;
font-family: 'Comic Sans MS';
}
<input type="range" />
::-webkit-slider-runnable-track {
border: 2px solid red;
background: green;
padding: 2em 0;
}
::-webkit-slider-thumb {
outline: 2px solid blue;
}
注
::-webkit-fill-lower: 轨道手柄前面
::-webkit-fill-upper: 轨道手柄后面
::-webkit-ticks-before: 跟踪刻度线范围前
::-webkit-ticks-after: 跟踪刻度线范围后
::-webkit-thumb: 手柄
::-webkit-track: 轨道
::ms-tooltip: 在用户选择一个范围元素时显示工具。注意,这个元素不能设置样式,只能用 display 隐藏。
<input type="search" />
/* Remove the rounded corners */
input[type='search'] {
-webkit-appearance: none;
}
/* Hide the cancel button */
::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* Hide the magnifying glass */
::-webkit-search-results-button {
-webkit-appearance: none;
}
webkit 默认为搜索框提供一个定制的 ui 带有取消和搜索按钮。::-webkit-search-cancel-button 和 ::-webkit-search-results-button 可以提供定制样式,但是你除了像下面那样隐藏,不能做再多的操作
<button>提交</button>
button::-webkit-focus-inner,
input[type='reset']::-webkit-focus-inner,
input[type='button']::-webkit-focus-inner,
input[type='submit']::-webkit-focus-inner,
input[type='file'] > input[type='button']::-webkit-focus-inner {
border: 1px dotted transparent;
padding: 0 2px;
}
这些规则可以在火狐和其他渲染引擎上很容易的创建按钮显示的不同外观。这是令人困惑的事情,实际上需要一个方法去掉他们。自从 2002 开始有这个方法。
默认的 padding 和 border 可以被重置为 0
button::-webkit-focus-inner,
input::-webkit-focus-inner {
border: 0;
padding: 0;
}
<meter low="69" high="80" max="100" optimum="100" value="92">A</meter>
<meter low="69" high="80" max="100" optimum="100" value="72">C</meter>
<meter low="69" high="80" max="100" optimum="100" value="52">E</meter>
/* meter {
-webkit-appearance: none;
} */
::-webkit-meter-bar {
height: 50px;
background: white;
border: 2px solid black;
}
::-webkit-meter-optimum-value {
background: green;
}
::-webkit-meter-suboptimum-value {
background: orange;
}
::-webkit-meter-even-less-good-value {
background: blue;
}
注
Webkit 提供::-webkit-meter-bar, ::-webkit-meter-even-less-good-value, ::-webkit-meter-optimum-value, and ::-webkit-meter-suboptimal-value 用于 meter 元素的显示样式。
为了应用这些伪元素设置样式,你必须在 meter 元素上设置-webkit-appearance 为 none
::-webkit-meter-even-less-good-value,::-webkit-meter-optimum-value, 和 ::-webkit-meter-suboptimal-value 其中只有一个,会在给定时间依据 meter 的 value 值处于激活状态。
<progress max="100" value="50"></progress>
progress {
-webkit-appearance: none;
}
::-webkit-progress-inner-element {
}
::-webkit-progress-bar {
border: 2px solid black;
}
::-webkit-progress-value {
background: red;
}
<textarea></textarea>
::-webkit-resizer {
border: 2px solid black;
background: red;
box-shadow: 0 0 5px 5px blue;
outline: 2px solid yellow;
}
注
注意:给::-webkit-resizer 添加 display:none 并不能阻止用户修改 textarea 的尺寸,他仅仅是隐藏了控制。如果你禁用尺寸调整,可以设置 css 属性 resize:none。这个不仅可以隐藏控制,也可以在所有浏览器都禁用文本域尺寸调整。