スクロールボックスに内側の線を追加したいです。スクロールボックスのコードを以前調べて、付属写真の左側の緑色のスクロールボックスが出来たのですが、付属写真の青いスクロールボックス（右側）の赤い矢印の縦線（スクロールボックスの内側の縦線）の表示のさせ方が分からずに困っています。コードは以下になります。どうしたらよいでしょうか？ ○○HTMLコード名前：利用規約 (以下「本サービス」といいます。)を提供するにあたり、以下の通り利用規約を定めます。なお、本サービスのユーザーは本規約に同意されたものとみなします。すべての項目にご同意いただけない場合は、本サービスのご利用をお控えください。第1条 (定義) 入力画面へ戻る ○○○CSSのコード「kiyaku CSS」 /*スクロール内のボックスの指定*/ .main{ width:550px; height:350px; border: 2px solid #63e02d; overflow: auto; margin: 30px auto; color: #63e02d; } /*スクロールの幅の指定*/ .main::-webkit-scrollbar{ width: 10px; height: 10px; } /*スクロールの背景の指定*/ .main::-webkit-scrollbar-track { border-radius:5px; box-shadow: 004px #63e02d; } /*スクロールのつまみ部分の指定*/ .main::-webkit-scrollbar-thumb { border-radius: 5px; background: #63e02d; }

スクロールボックスに内側の線を追加したいです。スクロールボックスのコードを以前調べて、付属写真の左側

解決済

質問者：pjdmgam
質問日時：2021/04/26 08:26
回答数：1件

スクロールボックスに内側の線を追加したいです。スクロールボックスのコードを以前調べて、付属写真の左側の緑色のスクロールボックスが出来たのですが、付属写真の青いスクロールボックス（右側）の赤い矢印の縦線（スクロールボックスの内側の縦線）の表示のさせ方が分からずに困っています。

コードは以下になります。どうしたらよいでしょうか？

○○HTMLコード

<!DOCTYPE html>
<html>
<head>
<meta charset ="utf-8">
<link rel="stylesheet" href="kiyaku.css">
<title></title>

</head>
<body>
<form action ="hpform3.php" method ="post" name="doui_form" onsubmit="return false">
<p></p>
<div class="row">
<label class="col-sm-2 control-label" for="name">名前：<?php echo $name; ?></label>
</div>
<p></p>
<label class="title2" for="title2">利用規約</label>
</div>
<p></p>

<div class="main">

<p>(以下「本サービス」といいます。)を提供するにあたり、以下の通り利用規約を定めます。なお、本サービスのユーザーは本規約に同意されたものとみなします。<br>
すべての項目にご同意いただけない場合は、本サービスのご利用をお控えください。</p>

<h4>第1条 (定義)</h4>

</div>

</form>
<p><a href="form1.php?action=edit">入力画面へ戻る</a></p>
</body>
</html>

○○○CSSのコード「kiyaku CSS」

/*スクロール内のボックスの指定*/
.main{
width:550px;
height:350px;
border: 2px solid #63e02d;
overflow: auto;
margin: 30px auto;
color: #63e02d;

}

/*スクロールの幅の指定*/
.main::-webkit-scrollbar{
width: 10px;
height: 10px;

}
/*スクロールの背景の指定*/
.main::-webkit-scrollbar-track
{
border-radius:5px;
box-shadow: 004px #63e02d;
}
/*スクロールのつまみ部分の指定*/
.main::-webkit-scrollbar-thumb
{
border-radius: 5px;
background: #63e02d;
}