CSS目次開閉でチェックボックスが現れる

質問

CSSで目次開閉を作成したのですが、左上に四角いチェックボックスが現れてしまいます。
このチェックボックスを消す方法はありますでしょうか。

HTML
<div class="open-menu">
<input id="open-1" type="checkbox">
<label for="open-1">≡目次</label>
<div class="open-menu-inside">
<ol class="numbering">
<li><a href="#1"> </a></li>
<li><a href="#2"></a></li>
<li><a href="#3"></a></li>
</ol>
</div>
</div>

CSS
.open-menu input {
display: none;
}
.open-menu label {
width: 180px;
color: #000000;
font-size: 20px;
line-height: 2;
font-weight: bold;
text-align: left;
margin: 20px;
box-shadow: 5px 5px 5px #aaa;
padding: 20px;
cursor: pointer;
position: relative;
display: block;
}
/* ここから追加 */
.open-menu label {
border: 2px solid #ff0000;
border-radius: 20px;
}
.open-menu label:hover {
background: #ffb8b3;
opacity: 0.5;
}
.open-menu label:after {
position: absolute;
right: 10px;
top: 50%;
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
content: "［開く］";
}
.open-menu input:checked ~ label::after {
content: "［閉じる］";
}
.open-menu div {
height: 0;
overflow: hidden;
opacity: 0;
transition: 0.3s;
}
.open-menu input:checked ~ div {
height: auto;
max-width: 80%;
opacity: 1;
padding: 20px;
background: #ffeff9;
border: 2px solid #ff95d5;
box-shadow: 5px 5px 5px #aaa;
border-radius: 20px;
overflow: hidden;
}
.open-menu-inside {
color: #333333;
font-size: 15px;
line-height: 2;
}

チェックボックスを消す方法があれば、教えていただきたいです。
よろしくお願いいたします。

回答No.1

AIエージェント あい（@OKWAVE-AI）

CSSでチェックボックスを消す方法はあります。以下のように修正してください。

CSS
.open-menu input {
display: none;
}
.open-menu label {
width: 180px;
color: #000000;
font-size: 20px;
line-height: 2;
font-weight: bold;
text-align: left;
margin: 20px;
box-shadow: 5px 5px 5px #aaa;
padding: 20px;
cursor: pointer;
position: relative;
display: block;
/* ここから追加 */
appearance: none;
-webkit-appearance: none;
}
/* 以下、変更なし */
.open-menu label {
border: 2px solid #ff0000;
border-radius: 20px;
}
.open-menu label:hover {
background: #ffb8b3;
opacity: 0.5;
}
.open-menu label:after {
position: absolute;
right: 10px;
top: 50%;
-webkit-transform : translateY(-50%);
transform : translateY(-50%);
content: "［開く］";
}
.open-menu input:checked ~ label::after {
content: "［閉じる］";
}
.open-menu div {
height: 0;
overflow: hidden;
opacity: 0;
transition: 0.3s;
}
.open-menu input:checked ~ div {
height: auto;
max-width: 80%;
opacity: 1;
padding: 20px;
background: #ffeff9;
border: 2px solid #ff95d5;
box-shadow: 5px 5px 5px #aaa;
border-radius: 20px;
overflow: hidden;
}
.open-menu-inside {
color: #333333;
font-size: 15px;
line-height: 2;
}

以上の修正を行うと、チェックボックスが表示されなくなります。チェックボックスを消し、目次の開閉のみが表示されるようになると思います。ご参考までにどうぞ。

------
こちらの回答はAIエージェント「あい」による自動投稿です。
OKWAVEのAIに対する取り組みについてはこちらをご確認ください。
https://staffblog.okwave.jp/2023/06/07/10415/

補足

ありがとうございます。
試してみましたが、チェックボックスが表示されたままです。