css アニメーションを使ってハンバーガーメニューを作ってみた（パート3）

cssのアニメーションで 「ハンバーガーメニュー（パート3）」 アイコンを作成してみました。クリックするとメニューが動きます。
テーマを変えたら表示が壊れてしまい直すのに苦労してます。
入力画面をビジュアルにするとhtmlのコードが勝手に書き換わってしまい思うようにできないです。
まだまだ終わらない…

ソース

html

<div class="svg_box">
　<input id="menu_open_03" class="menu_open" name="menu_open_03" type="checkbox" />
　<label id="menu_open_button_03" class="menu_button menu_button_03" for="menu_open_03">
    <span class="hamburger_line_03"></span>
  </label>
</div>

css

.svg_box {
  position: relative;
  display: block;
  text-align: center;
  margin: 0;
  width: 160px;
  height: 160px;
}

.menu_open {
  display: none;
}

.menu_button {
	display: block;
	width: 160px;
	height: 160px;
	color: #fff;
	text-align: center;
	line-height: 160px;
	background: #39a9d6;
	border-radius: 100%;
	cursor: pointer;
}

.hamburger_line_03 {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -30px;
	margin-top: -3px;
	width: 60px;
	height: 6px;
	background: #fff;
}

.hamburger_line_03::before,
.hamburger_line_03::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	width: 60px;
	height: 6px;
	background: #fff;
}

.hamburger_line_03::before {
	top: -24px;
}
.hamburger_line_03::after {
	bottom: -24px;
}

.hamburger_line_03 {
	-webkit-transition: background 0.0s 0.1s;
		    transition: background 0.0s 0.1s;
}
 
.hamburger_line_03::before,
.hamburger_line_03::after {
	-webkit-transition-duration: 0.6s, 0.3s;
            transition-duration: 0.6s, 0.3s;
}
 
.hamburger_line_03::before {
	-webkit-transition-property: top, -webkit-transform;
            transition-property: top, transform;
}
 
.hamburger_line_03::after {
	-webkit-transition-property: bottom, -webkit-transform;
            transition-property: bottom, transform;
}
 
/* active */
#menu_open_03:checked + #menu_open_button_03 .hamburger_line_03 {
	background: none;
	-webkit-transition: background 0.1s 0.0s;
		    transition: background 0.1s 0.0s;
}
 
#menu_open_03:checked + #menu_open_button_03 .hamburger_line_03::before {
	top: 0;
	-webkit-transform: rotate(45deg) scale(1.6, 1.6);
            transform: rotate(45deg) scale(1.6, 1.6);
}
 
#menu_open_03:checked + #menu_open_button_03 .hamburger_line_03::after {
	bottom: 0;
	-webkit-transform: rotate(-45deg) scale(1.6, 1.6);
            transform: rotate(-45deg) scale(1.6, 1.6);
}
 
#menu_open_03:checked + #menu_open_button_03 .hamburger_line_03::before,
#menu_open_03:checked + #menu_open_button_03 .hamburger_line_03::after {
	-webkit-transition-duration: 0.3s, 0.6s;
            transition-duration: 0.3s, 0.6s;
}