html中怎麼添加箭头,html – 向滚动条添加箭头

我一直在为你玩它.

首先,我将按钮设置为10px x 10px以使其更容易,并创建4个10×10个箭头,指向左,右,上和下.

然后我将background-size设置为100%,以正确缩放它.

然后我使用:increment,:decrement,:horizo​​ntal和:vertical选择器为每个按钮设置正确的图像.

图像现在在我的公共DropBox上,但您可以添加自己的图像.

我写的代码是这样的:

::-webkit-scrollbar-button {

background-size: 100%;

height: 10px;

width: 10px;

-webkit-Box-shadow: inset 1px 1px 2px rgba(0,0.2);

}

::-webkit-scrollbar-button:horizontal:increment {

background-image: url(https://dl.dropBoxusercontent.com/u/55165267/icon2.png);

}

::-webkit-scrollbar-button:horizontal:decrement {

background-image: url(https://dl.dropBoxusercontent.com/u/55165267/icon4.png);

}

::-webkit-scrollbar-button:vertical:increment {

background-image: url(https://dl.dropBoxusercontent.com/u/55165267/icon3.png);

}

::-webkit-scrollbar-button:vertical:decrement {

background-image: url(https://dl.dropBoxusercontent.com/u/55165267/icon.png);

}

编辑:

通过添加以下样式来管理以获得OP所需的滚动按钮:

::-webkit-scrollbar-button:end {

display: block;

}

::-webkit-scrollbar-button:start {

display: none;

}

使用base64图像更新代码而不是损坏的链接:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值