CSS3

疑似クラス

:horizontal

 編集:2022.07.07 by T.A.

[Edge]⛌?。→Webkit(en-US)mdn(en-US)

水平疑似クラス。水平方向のスクロール バー ピースに適用される。

E:horizontal
E 該当させる要素。

以下のCSSが組み込んであります:

.Test::-webkit-scrollbar:horizontal{
  background-color:#f00;
  width:10px;
}
<DIV style="width:100px; height:100px; overflow:scroll; border:1px solid red;
">ああああああああああああああああああああ
</DIV>
ああああああああああああああああああああ

<DIV class=Test style="width:100px; height:100px; overflow:scroll; border:1px solid red;
">ああああああああああああああああああああ
</DIV>
ああああああああああああああああああああ

以下のCSSが組み込んであります:

.Test2::-webkit-scrollbar-button:horizontal{
  background-color:#f00;
}
<DIV class=Test2 style="width:100px; height:100px; overflow:scroll; border:1px solid red;
">ああああああああああああああああああああ
</DIV>
ああああああああああああああああああああ

関連

::-webkit-scrollbar::-webkit-scrollbar-button::-webkit-scrollbar-thumb::-webkit-scrollbar-track::-webkit-scrollbar-track-piece::-webkit-scrollbar-corner::-webkit-resizer疑似要素。

:horizontal:vertical 疑似クラス。


テスト
HTML:

ここに表示
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: