今天看了下Chrome的网上商城, 感觉他们的滚动条很特别. 特地看了下他们的代码, 发现了他们做滚动条的各种元素的覆盖, 这个也可以用作select的框覆盖, 相信不久的将来, 这种css设计会用于各种浏览器, 本人在开发IE10内核的项目时, IE10已经是支持这类css, firefox, chrome和safari也是支持的. 特地分享该例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.custom-scroll-bar::-webkit-scrollbar{
background:-webkit-linear-gradient(left,rgba(202, 202, 202, 0.07) 0%,rgba(229, 229, 229, 0.07) 100%);
width:10px;
-webkit-box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;
box-shadow:0 0 1px 0 rgba(0,0,0,.15) inset,0 1px 0 0 #fff;
background-color:#E5E5E5;
}
.custom-scroll-bar::-webkit-scrollbar, .custom-scroll-bar::-webkit-scrollbar-thumb{
overflow: visible;
border-radius:4px;
border:solid 1px #A6A6A6;
}
.custom-scroll-bar::-webkit-scrollbar-button{
background-color:transparent;height:0px;display:block;
}
.custom-scroll-bar::-webkit-scrollbar-thumb:hover{
background-color: #fff;
}
</style>
</head>
<body>
<div class="custom-scroll-bar" style="width:100px;height:100px;overflow: auto;">
<div style="width:80px;height:200px;">
dsadasd
dsadasd
dsadasd
dsadasd
dsadasd
dsadasd
dsadasd
dsadasd
dsadasd
dsadasd
dsadasd
dsadasd
</div>
</div>
</body>
</html>
分享到：
相关推荐
首先，我们需要理解CSS3提供了对滚动条样式的一些控制，如`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等伪元素，但这些样式只在Webkit内核的浏览器（如Chrome、Safari）中有效。对于Firefox、IE/Edge等非...
为了实现更好的兼容性，你需要使用JavaScript库或Pseudo Elements等其他方法来覆盖Firefox、Edge等非Webkit浏览器的滚动条样式。 在实际项目中，你可以在`滚动条示例.html`文件中查看完整的代码实现，并根据需要...
对于非Webkit内核的浏览器，如Internet Explorer，其滚动条样式定制支持有限，通常只能改变颜色，例如： ```css scrollbar-arrow-color: #f2f2f3; /* 上下箭头 */ scrollbar-track-color: /* 底层背景色 */; ...
首先，我们要了解浏览器的默认滚动条样式是无法直接通过CSS修改的，但可以通过CSS3的`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等伪元素来定制Webkit内核浏览器（如Chrome和Safari）的滚动条样式。...
这通常需要使用Webkit前缀，因为并非所有浏览器都支持CSS3的滚动条样式，Webkit内核的浏览器（如Chrome、Safari）支持较好。 ```css ::-webkit-scrollbar { width: 10px; /* 滚动条宽度 */ } ::-webkit-...
在CSS中，Webkit内核的浏览器如Chrome和Safari提供了`-webkit-scrollbar`和`-webkit-scrollbar-part`等伪元素来定制滚动条样式。而Firefox使用`scrollbar-color`和`scrollbar-width`属性，IE则需要通过JavaScript...
为了实现统一的滚动条样式，我们可以利用JavaScript库或者自定义CSS样式来覆盖默认样式。 1. **使用CSS自定义滚动条样式** CSS3引入了`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等伪元素，允许我们对...
通过设置`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等伪元素的样式，可以在支持Webkit内核的浏览器（如Chrome和Safari）中定制滚动条的颜色、大小、形状等属性。例如，可以使用`background-color`属性来...
为了实现统一且吸引人的滚动条效果，开发者通常会使用JS配合CSS来覆盖这些默认样式。 1. **CSS自定义滚动条**：在现代浏览器中，CSS提供了`::-webkit-scrollbar`和`::-webkit-scrollbar-thumb`等伪元素，允许我们...
/* 隐藏滚动条 */ } select::-ms-expand { display: none; /* 隐藏IE和Edge的下拉箭头 */ } ``` 请注意，对于Firefox，由于其不支持`-webkit-`前缀，我们需要使用一个自定义的图形或伪元素来替换箭头。这通常涉及...
这可能需要通过自定义CSS样式来实现一致性，例如使用`::-webkit-scrollbar`等伪元素来定制Webkit内核浏览器的滚动条样式。对于非Webkit浏览器，可能需要借助JavaScript库，如Perfect Scrollbar或SimpleBar来实现兼容...
可能使用了如`::-webkit-scrollbar`这样的伪元素选择器来定制Webkit内核浏览器（如Chrome和Safari）的滚动条样式，并通过其他CSS方法处理非Webkit浏览器的滚动条隐藏。 2. **test.html**：这是一个测试页面，用于...
例如，如果设置了`body`的文本颜色，那么其内部的所有段落（`<p>`标签）也将继承这一颜色，除非另有特定样式覆盖。 【样式表的定义与使用】 CSS可以通过以下几种方式应用于HTML页面： 1. **直接定义标记的style属性...
- **FrameLayout（框架布局）**：是最简单的布局，它会按照添加顺序将所有子视图堆叠在一起，后面添加的视图会覆盖前面的视图。这种布局适用于只需要在一个位置放置一个视图的情况。 - **LinearLayout（线性布局）*...