From 6fc68d784365bde01972ac5ffcd1967a84de66d9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9E=AB=E8=B0=B7=E5=89=91=E4=BB=99?= <mapaler@163.com>
Date: Thu, 25 Apr 2024 00:55:51 +0800
Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=E9=A2=9C=E8=89=B2=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E4=B8=BA=E5=A4=9A=E9=80=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 languages/en.css             |   5 +-
 languages/ja.css             |   5 +-
 languages/ko.css             |   5 +-
 languages/zh-hant.css        |   5 +-
 multi.html                   | 128 +++++++++++++++++------------------
 script-universal_function.js |  51 ++++++++++----
 script.js                    |  54 ++++++++-------
 service-worker.js            |  24 +++----
 solo.html                    |  47 ++++++-------
 style.css                    |  14 ++--
 triple.html                  | 128 +++++++++++++++++------------------
 11 files changed, 248 insertions(+), 218 deletions(-)

diff --git a/languages/en.css b/languages/en.css
index 3e46913b..6df01818 100644
--- a/languages/en.css
+++ b/languages/en.css
@@ -328,7 +328,7 @@ label[for="show-rich-text-tools"]::after{
 .search-box>summary::after{
 	content: "Search Cards";
 }
-.search-box .attrs-div label[for="fix-main-color"]::after{
+label[for="fix-main-color"]::after{
 	content: "The order of the attributes is consistent with the order you selected";
 }
 .search-box label[for="consider-equivalent-awoken"]::after{
@@ -383,7 +383,8 @@ label[for="show-rich-text-tools"]::after{
 }
 .search-box .awoken-clear::before,
 .search-box .sawoken-clear::before,
-.special-div .special-clear::before
+.special-div .special-clear::before,
+#attr-clear::before
 {
 	content: "Clear";
 }
diff --git a/languages/ja.css b/languages/ja.css
index f5c5affc..30e4b365 100644
--- a/languages/ja.css
+++ b/languages/ja.css
@@ -322,7 +322,7 @@ label[for="show-rich-text-tools"]::after{
 .search-box>summary::after{
 	content: "モンスターの検索";
 }
-.search-box .attrs-div label[for="fix-main-color"]::after{
+label[for="fix-main-color"]::after{
 	content: "属性の順序は、選択した順序と一致";
 }
 .search-box label[for="consider-equivalent-awoken"]::after{
@@ -377,7 +377,8 @@ label[for="show-rich-text-tools"]::after{
 }
 .search-box .awoken-clear::before,
 .search-box .sawoken-clear::before,
-.special-div .special-clear::before
+.special-div .special-clear::before,
+#attr-clear::before
 {
 	content: "クリア";
 }
diff --git a/languages/ko.css b/languages/ko.css
index 05ff119f..76be7ded 100644
--- a/languages/ko.css
+++ b/languages/ko.css
@@ -317,7 +317,7 @@ label[for="show-rich-text-tools"]::after{
 .search-box>summary::after{
 	content: "몬스터 검색";
 }
-.search-box .attrs-div label[for="fix-main-color"]::after{
+label[for="fix-main-color"]::after{
 	content: "속성 순서는 선택한 순서와 일치합니다";
 }
 .search-box label[for="consider-equivalent-awoken"]::after{
@@ -372,7 +372,8 @@ label[for="show-rich-text-tools"]::after{
 }
 .search-box .awoken-clear::before,
 .search-box .sawoken-clear::before,
-.special-div .special-clear::before
+.special-div .special-clear::before,
+#attr-clear::before
 {
 	content: "명확한";
 }
diff --git a/languages/zh-hant.css b/languages/zh-hant.css
index d737c540..ef9cc7c6 100644
--- a/languages/zh-hant.css
+++ b/languages/zh-hant.css
@@ -323,7 +323,7 @@ label[for="show-rich-text-tools"]::after{
 .search-box>summary::after{
 	content: "搜索怪物";
 }
-.search-box .attrs-div label[for="fix-main-color"]::after{
+label[for="fix-main-color"]::after{
 	content: "強制屬性順序與選擇順序一致";
 }
 .search-box label[for="consider-equivalent-awoken"]::after{
@@ -378,7 +378,8 @@ label[for="show-rich-text-tools"]::after{
 }
 .search-box .awoken-clear::before,
 .search-box .sawoken-clear::before,
-.special-div .special-clear::before
+.special-div .special-clear::before,
+#attr-clear::before
 {
 	content: "清除";
 }
diff --git a/multi.html b/multi.html
index 6a1544b6..0c94d7a3 100644
--- a/multi.html
+++ b/multi.html
@@ -67,23 +67,23 @@ const teamsCount = 2;
 		<div>
 			<a class="down-capture display-none" target="_blank"></a>
 			<button class="btn-qrcode fa"></button>
-			<button id="draw-screenshot"><input type="checkbox" id="screenshot-transparent"><label for="screenshot-transparent">透明</label></button>
+			<button id="draw-screenshot"><input type="checkbox" id="screenshot-transparent"><label for="screenshot-transparent"></label></button>
 			<label for="default-level"></label><input id="default-level" type="number" min="1" max="120" placeholder="110"/>
-			<input type="checkbox" name="change-swap-to-copy" id="change-swap-to-copy"><label class="switch-lbl" for="change-swap-to-copy"></label>
+			<input type="checkbox" name="change-swap-to-copy" id="change-swap-to-copy"><label for="change-swap-to-copy"></label>
 		</div>
 		<details class="config-display-list">
 			<summary></summary>
-			<input type="checkbox" class="switch-ipt" id="show-card-id"><label class="switch-lbl" for="show-card-id"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-card-rarity"><label class="switch-lbl" for="show-card-rarity"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-skill-cd"><label class="switch-lbl" for="show-member-skill-cd"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-ability"><label class="switch-lbl" for="show-member-ability"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-types"><label class="switch-lbl" for="show-member-types"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-awoken"><label class="switch-lbl" for="show-member-awoken"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-total-info"><label class="switch-lbl" for="show-team-total-info"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-attrtype-count"><label class="switch-lbl" for="show-team-attrtype-count"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-awoken-effect"><label class="switch-lbl" for="show-team-awoken-effect"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-awoken-count"><label class="switch-lbl" for="show-team-awoken-count"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-rich-text-tools"><label class="switch-lbl" for="show-rich-text-tools"><circle></circle></label>
+			<input type="checkbox" class="switch-ipt" id="show-card-id"><label for="show-card-id"></label>
+			<input type="checkbox" class="switch-ipt" id="show-card-rarity"><label for="show-card-rarity"></label>
+			<input type="checkbox" class="switch-ipt" id="show-member-skill-cd"><label for="show-member-skill-cd"></label>
+			<input type="checkbox" class="switch-ipt" id="show-member-ability"><label for="show-member-ability"></label>
+			<input type="checkbox" class="switch-ipt" id="show-member-types"><label for="show-member-types"></label>
+			<input type="checkbox" class="switch-ipt" id="show-member-awoken"><label for="show-member-awoken"></label>
+			<input type="checkbox" class="switch-ipt" id="show-team-total-info"><label for="show-team-total-info"></label>
+			<input type="checkbox" class="switch-ipt" id="show-team-attrtype-count"><label for="show-team-attrtype-count"></label>
+			<input type="checkbox" class="switch-ipt" id="show-team-awoken-effect"><label for="show-team-awoken-effect"></label>
+			<input type="checkbox" class="switch-ipt" id="show-team-awoken-count"><label for="show-team-awoken-count"></label>
+			<input type="checkbox" class="switch-ipt" id="show-rich-text-tools"><label for="show-rich-text-tools"></label>
 		</details>
 		<div class="status"></div>
 		<div>
@@ -821,51 +821,51 @@ const teamsCount = 2;
 		<button id="insert-latent-icon" title="Insert Latent Icon"></button>
 		<button id="insert-type-icon" title="Insert Type Icon"></button>
 		<button id="insert-orb-icon" title="Insert Orb Icon"></button>
-		<input type="checkbox" class="switch-ipt" id="siwtch-code-mode"><label class="switch-lbl" for="siwtch-code-mode" title="Code Mode"><circle></circle></label>
+		<input type="checkbox" class="switch-ipt" id="siwtch-code-mode"><label for="siwtch-code-mode" title="Code Mode"></label>
 	</div>
 	<div class="edit-box display-none">
 		<div class="edit-box-title"><!--修改怪物--></div>
 		<details class="search-box">
 			<summary></summary>
-			<div class="attrs-div"><!--属性-->
+			<form id="search-attr" class="attrs-div"><!--属性-->
 				<label class="monster" for="avatar-select">
 					<input type="file" accept="image/*" id="avatar-select" />
 					<canvas class="custom-avatar" width="100" height="100"></canvas>
 					<div class="attrs">
-						<div class="attr"></div>
-						<div class="attr"></div>
-						<div class="attr"></div>
+						<div class="attr" data-attr="any"></div>
+						<div class="attr" data-attr="any"></div>
+						<div class="attr" data-attr="any"></div>
 					</div>
 				</label>
-				<ul class="attr-list">
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b0000010" id="search-attr-1-1" /><label for="search-attr-1-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b0000100" id="search-attr-1-2" /><label for="search-attr-1-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b0001000" id="search-attr-1-3" /><label for="search-attr-1-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b0010000" id="search-attr-1-4" /><label for="search-attr-1-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b1000000" id="search-attr-1-6" /><label for="search-attr-1-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无主属性-->
-				</ul>
-				<ul class="attr-list">
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b1111111" id="search-attr-2-any" checked/><label for="search-attr-2-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b0000001" id="search-attr-2-0" /><label for="search-attr-2-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b0000010" id="search-attr-2-1" /><label for="search-attr-2-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b0000100" id="search-attr-2-2" /><label for="search-attr-2-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b0001000" id="search-attr-2-3" /><label for="search-attr-2-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b0010000" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b1000000" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
-				</ul>
-				<ul class="attr-list">
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b1111111" id="search-attr-3-any" checked/><label for="search-attr-3-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b0000001" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b0000010" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b0000100" id="search-attr-3-2" /><label for="search-attr-3-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b0001000" id="search-attr-3-3" /><label for="search-attr-3-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b0010000" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b1000000" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
-				</ul>
-				<div class="options"><button id="avatar-save" class="display-none">💾</button><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="switch-lbl" for="fix-main-color"></label></div>
-			</div>
+				<div class="attr-selecter-list">
+					<ul class="attr-list horizontally-radio-list">
+						<li><input type="checkbox" name="attr-1" value="0" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
+						<li><input type="checkbox" name="attr-1" value="1" id="search-attr-1-1" /><label for="search-attr-1-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
+						<li><input type="checkbox" name="attr-1" value="2" id="search-attr-1-2" /><label for="search-attr-1-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
+						<li><input type="checkbox" name="attr-1" value="3" id="search-attr-1-3" /><label for="search-attr-1-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
+						<li><input type="checkbox" name="attr-1" value="4" id="search-attr-1-4" /><label for="search-attr-1-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
+						<li><input type="checkbox" name="attr-1" value="6" id="search-attr-1-6" /><label for="search-attr-1-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无主属性-->
+					</ul>
+					<ul class="attr-list horizontally-radio-list">
+						<li><input type="checkbox" name="attr-2" value="0" id="search-attr-2-0" /><label for="search-attr-2-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
+						<li><input type="checkbox" name="attr-2" value="1" id="search-attr-2-1" /><label for="search-attr-2-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
+						<li><input type="checkbox" name="attr-2" value="2" id="search-attr-2-2" /><label for="search-attr-2-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
+						<li><input type="checkbox" name="attr-2" value="3" id="search-attr-2-3" /><label for="search-attr-2-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
+						<li><input type="checkbox" name="attr-2" value="4" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
+						<li><input type="checkbox" name="attr-2" value="6" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
+					</ul>
+					<ul class="attr-list horizontally-radio-list">
+						<li><input type="checkbox" name="attr-3" value="0" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
+						<li><input type="checkbox" name="attr-3" value="1" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
+						<li><input type="checkbox" name="attr-3" value="2" id="search-attr-3-2" /><label for="search-attr-3-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
+						<li><input type="checkbox" name="attr-3" value="3" id="search-attr-3-3" /><label for="search-attr-3-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
+						<li><input type="checkbox" name="attr-3" value="4" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
+						<li><input type="checkbox" name="attr-3" value="6" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
+					</ul>
+				</div>
+				<button id="attr-clear" type="reset" class="brown-button"></button>
+				<div class="options"><button id="avatar-save" type="button" class="display-none">💾</button><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label for="fix-main-color"></label></div>
+			</form>
 			<div class="types-div"><!--类型-->
 				<ul class="type-list">
 					<li data-type-icon="5"><input type="checkbox" class="type-check" name="types" value="5" id="search-type-5" /><label class="type-icon" data-type-icon="5" for="search-type-5"><!--神--></label></li>
@@ -882,7 +882,7 @@ const teamsCount = 2;
 					<li data-type-icon="15"><input type="checkbox" class="type-check" name="types" value="15" id="search-type-15" /><label class="type-icon" data-type-icon="15" for="search-type-15"><!--販賣用--></label></li>
 					<!--<li><input type="checkbox" class="type-check" name="types" value="9" id="search-type-9" /><label class="display-none" data-type-icon="9" for="search-type-9"></label></li>--><!--特别保护-->
 				</ul>
-				<input type="checkbox" class="switch-ipt" name="type-and-or" id="type-and-or" checked><label class="switch-lbl" for="type-and-or"><circle></circle></label>
+				<input type="checkbox" class="switch-ipt" name="type-and-or" id="type-and-or" checked><label for="type-and-or"></label>
 				<ul class="latent-ul">
 					<li class="latent-icon" data-latent-icon="20"></li><!--神杀-->
 					<li class="latent-icon" data-latent-icon="21"></li><!--龙杀-->
@@ -911,9 +911,9 @@ const teamsCount = 2;
 			</div>
 			<div class="awoken-div"><!--觉醒-->
 				<div class="awoken-option"><!--觉醒搜索选项开关-->
-					<input type="checkbox" name="consider-equivalent-awoken" id="consider-equivalent-awoken" checked><label class="switch-lbl" for="consider-equivalent-awoken"></label>
-					<input type="checkbox" class="switch-ipt" name="include-super-awoken" id="include-super-awoken"><label class="switch-lbl" for="include-super-awoken"><circle></circle></label>
-					<input type="checkbox" class="switch-ipt" name="show-official-awoken-sorting" id="show-official-awoken-sorting"><label class="switch-lbl" for="show-official-awoken-sorting"><circle></circle></label>
+					<input type="checkbox" name="consider-equivalent-awoken" id="consider-equivalent-awoken" checked><label for="consider-equivalent-awoken"></label>
+					<input type="checkbox" class="switch-ipt" name="include-super-awoken" id="include-super-awoken"><label for="include-super-awoken"></label>
+					<input type="checkbox" class="switch-ipt" name="show-official-awoken-sorting" id="show-official-awoken-sorting"><label for="show-official-awoken-sorting"></label>
 				</div>
 				<div class="selected-awokens-div"><!--选中的觉醒列表-->
 					<ul class="awoken-ul selected-awokens">
@@ -1199,10 +1199,10 @@ const teamsCount = 2;
 				</ul>
 			</div>
 			<div class="fast-switch">
-				<input type="checkbox" name="can-assist" id="can-assist"><label class="switch-lbl" for="can-assist"></label>
-				<input type="checkbox" name="can-level-limit-breakthrough" id="can-level-limit-breakthrough"><label class="switch-lbl" for="can-level-limit-breakthrough"></label>
-				<input type="checkbox" name="have-8-latent-slot" id="have-8-latent-slot"><label class="switch-lbl" for="have-8-latent-slot"></label>
-				<input type="checkbox" name="not-weapon" id="not-weapon"><label class="switch-lbl" for="not-weapon"></label>
+				<input type="checkbox" name="can-assist" id="can-assist"><label for="can-assist"></label>
+				<input type="checkbox" name="can-level-limit-breakthrough" id="can-level-limit-breakthrough"><label for="can-level-limit-breakthrough"></label>
+				<input type="checkbox" name="have-8-latent-slot" id="have-8-latent-slot"><label for="have-8-latent-slot"></label>
+				<input type="checkbox" name="not-weapon" id="not-weapon"><label for="not-weapon"></label>
 			</div>
 			<div class="control-div"><!--控制栏-->
 				<button class="search-start"><!--开始搜索--></button>
@@ -1210,14 +1210,14 @@ const teamsCount = 2;
 				<button class="search-clear"><!--清空搜索条件--></button>
 				<button class="search-share"><!--分享搜索内容--></button>
 				<div class="additional-div"><!--额外显示栏-->
-					<input type="checkbox" class="switch-ipt" name="add-show-CD" id="add-show-CD"><label class="switch-lbl" for="add-show-CD"><circle></circle></label>
-					<input type="checkbox" class="switch-ipt" name="add-show-abilities" id="add-show-abilities"><label class="switch-lbl" for="add-show-abilities"><circle></circle></label>
-					<input type="checkbox" class="switch-ipt" name="add-show-abilities-with-awoken" id="add-show-abilities-with-awoken"><label class="switch-lbl" for="add-show-abilities-with-awoken"><circle></circle></label>
-					<input type="checkbox" class="switch-ipt" name="add-show-awoken" id="add-show-awoken"><label class="switch-lbl" for="add-show-awoken"><circle></circle></label>
+					<input type="checkbox" class="switch-ipt" name="add-show-CD" id="add-show-CD"><label for="add-show-CD"></label>
+					<input type="checkbox" class="switch-ipt" name="add-show-abilities" id="add-show-abilities"><label for="add-show-abilities"></label>
+					<input type="checkbox" class="switch-ipt" name="add-show-abilities-with-awoken" id="add-show-abilities-with-awoken"><label for="add-show-abilities-with-awoken"></label>
+					<input type="checkbox" class="switch-ipt" name="add-show-awoken" id="add-show-awoken"><label for="add-show-awoken"></label>
 				</div>
 				<div class="sort-div"><!--排序栏-->
 					<select class="sort-list"></select>
-					<input type="checkbox" class="switch-ipt" name="sort-reverse" id="sort-reverse"><label class="switch-lbl" for="sort-reverse"><circle></circle></label>
+					<input type="checkbox" class="switch-ipt" name="sort-reverse" id="sort-reverse"><label for="sort-reverse"></label>
 					<div class="search-list-length"></div>
 				</div>
 			</div>
@@ -1416,8 +1416,8 @@ const teamsCount = 2;
 					<div class="skill-box">
 						<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
 							<div class="skill-parse-control">
-								<input type="checkbox" class="switch-ipt" name="show-skill-original" id="show-skill-original"><label class="switch-lbl" for="show-skill-original"><circle></circle></label>
-								<input type="checkbox" class="switch-ipt" name="merge-skill" id="merge-skill" checked><label class="switch-lbl" for="merge-skill"><circle></circle></label>
+								<input type="checkbox" class="switch-ipt" name="show-skill-original" id="show-skill-original"><label for="show-skill-original"></label>
+								<input type="checkbox" class="switch-ipt" name="merge-skill" id="merge-skill" checked><label for="merge-skill"></label>
 							</div>
 						</div>
 						<div class="skill-datail-original"></div>
@@ -1476,7 +1476,7 @@ const teamsCount = 2;
 				</div>
 			</div>
 			<div class="save-qr-box">
-				<ul class="qr-data-type-ul">
+				<ul class="qr-data-type-ul horizontally-radio-list">
 					<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="paddf" id="qr-data-type-pdf" checked/><label for="qr-data-type-pdf"></label></li><!--本程序-->
 					<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdc" id="qr-data-type-pdc" /><label for="qr-data-type-pdc"></label></li><!--PDC-->
 					<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="daddb" id="qr-data-type-daddb" /><label for="qr-data-type-daddb"></label></li><!--DADDB-->
@@ -1586,7 +1586,7 @@ const teamsCount = 2;
 			<button class="upload-data brown-button fa"></button>
 			<input type="file" class="file-select display-none" multiple/>
 			<a class="how-to-use" target="_blank" href="doc/export-player-data.html"></a>
-			<input type="checkbox" name="box-have" id="box-have"><label class="switch-lbl" for="box-have"></label>
+			<input type="checkbox" name="box-have" id="box-have"><label for="box-have"></label>
 		</div>
 		<div class="mask-content">
 			<ul class="player-datas-list"></ul>
diff --git a/script-universal_function.js b/script-universal_function.js
index 7d1ffb52..e7e902c0 100644
--- a/script-universal_function.js
+++ b/script-universal_function.js
@@ -886,31 +886,52 @@ function searchCards(cards, {attrs: sAttrs, fixMainColor, types, typeAndOr, rare
 					!card.stackable); //不可堆叠
 	//属性
 	const anyAttrsFlag = 0b1111101;
-	const anyAttrs = sAttrs.map(attr=>attr === 0 || (attr & anyAttrsFlag) == anyAttrsFlag);
-	if (anyAttrs.some(any=>!any)) { //当任一属性不为任意颜色时才需要筛选属性
-		const attrNums = sAttrs.filter(attr=>fixMainColor || attr > 0 && (attr & anyAttrsFlag) !== anyAttrsFlag) //如果固定顺序就全部返回，否则只返回不为任意色的不考虑顺序 
+	const isAnyAttrs = sAttrs.map(attr=>attr === 0 || (attr & anyAttrsFlag) == anyAttrsFlag);
+	if (isAnyAttrs.some(any=>!any)) { //当任一属性不为任意颜色时才需要筛选属性，否则跳过属性筛选
+		//如果固定顺序就直接使用当前颜色顺序；否则不考虑顺序时，去除任意色
+		const attrNums = sAttrs.filter(attr=>fixMainColor || attr > 0 && (attr & anyAttrsFlag) !== anyAttrsFlag)
 			.map(attr=>{
-				let attrNum = flags(attr);
+				const attrNum = flags(attr);
 				if (attrNum.includes(6)) attrNum.push(undefined,-1); //如果是包含6的，就添加-1和undefined的值
 				return attrNum;
 			});
 		if (fixMainColor) {//如果固定了顺序
 			cardsRange = cardsRange.filter(({attrs:cAttrs}) => {
 				//默认逻辑为，只要不是any，就判断这个颜色是否包含了对应的颜色
-				//只选第一属性的时候，且第一属性为无主属性的时候，也显示副属性等于主属性的
-				return (anyAttrs[0] || attrNums[0].includes(cAttrs[0]) || anyAttrs[1] && cAttrs[0] === 6 && attrNums[0].includes(cAttrs[1])) &&
-					   (anyAttrs[1] || attrNums[1].includes(cAttrs[1])) &&
-					   (anyAttrs[2] || attrNums[2].includes(cAttrs[2]));
+				return (isAnyAttrs[0] || attrNums[0].includes(cAttrs[0]) ||
+						isAnyAttrs[1] && cAttrs[0] === 6 && attrNums[0].includes(cAttrs[1])) && //只选第一属性的时候，且第一属性为无主属性的时候，也显示副属性等于主属性的
+					   (isAnyAttrs[1] || attrNums[1].includes(cAttrs[1])) &&
+					   (isAnyAttrs[2] || attrNums[2].includes(cAttrs[2]));
 			});
 		}
 		else {//不限定顺序时
-			cardsRange = cardsRange.filter(({attrs:cAttrs}) => {
-				let remainAttrNum = cAttrs.reduce((pre, attr)=>{
-					let findIndex = pre.findIndex(attrNum=>attrNum.includes(attr)); //每找到一组属性就去掉一个
-					if (findIndex >= 0) return pre.slice(0,findIndex).concat(pre.slice(findIndex+1));
-					else return pre;
-				}, attrNums);
-				return remainAttrNum.length === 0;
+			const attrFlags = sAttrs.filter(attr=>attr > 0 && (attr & anyAttrsFlag) !== anyAttrsFlag);
+			const notAnyAttrsCount = isAnyAttrs.filter(b=>!b).length;
+			cardsRange = cardsRange.filter(({attrs:cAttrs_, id}) => {
+				const cAttrs = cAttrs_.concat();
+				if (cAttrs[1] == undefined) cAttrs[1] = 6;
+				if (cAttrs[2] == undefined) cAttrs[2] = 6;
+				/*
+					我也不知道为什么这个代码可以跑，没学过矩阵运算，乱猜的，好像结果可以用，结果发现矩阵好像根本没用
+				*/
+				const matrix3x3 = attrFlags.map(sAttr=>{
+					return cAttrs.map(cAttr=>1 << cAttr & sAttr);
+				});
+				const rowValues = matrix3x3.map(row=>row.reduce((p,v)=>p | v,0)); //每个属性都有 filter 匹配
+				// const columValues = []; //每个 filter 都能匹配属性
+				// for (let i = 0; i < notAnyAttrsCount; i++) {
+				// 	const columValue = matrix3x3.reduce((p,v)=>p | v[i],0);
+				// 	columValues.push(columValue);
+				// }
+
+				const crossValue = cAttrs.map((cAttr, idx, arr)=> {
+					return arr.filter(item=>item===cAttr).length <= rowValues.filter(item=>item & 1 << cAttr).length;
+				});
+				const match = rowValues.every(Boolean) && crossValue.every(Boolean);
+				// if (match) {
+				// 	console.debug("id: %d, matrix3x3: %o, rowValues: %o, columValues: %o, crossValue: %o", id, matrix3x3, rowValues, columValues, crossValue);
+				// }
+				return match;
 			});
 		}
 	}
diff --git a/script.js b/script.js
index 1031f80e..762fb47b 100644
--- a/script.js
+++ b/script.js
@@ -4667,6 +4667,7 @@ function initialize() {
 	}
 	const searchEvolutionByThis = settingBox.querySelector(".row-mon-id .search-evolution-by-this");
 	searchEvolutionByThis.onclick = function() {showSearch(Cards.filter(card=>card.evoMaterials.includes(editBox.mid)))};
+	
 	const s_attr_lists = Array.from(searchBox.querySelectorAll(".attrs-div .attr-list")).map(list=>Array.from(list.querySelectorAll("input[type=\"radio\"]")));
 	const s_fixMainColor = searchBox.querySelector("#fix-main-color");
 	const s_typesDiv = searchBox.querySelector(".types-div");
@@ -4675,23 +4676,21 @@ function initialize() {
 	const s_typesLi = Array.from(s_typesUl.querySelectorAll("li"));
 	const s_types = s_typesLi.map(li=>li.querySelector(".type-check")); //checkbox集合
 	const attrPreview = searchBox.querySelector(".attrs-div .monster");
-	
-	//3种属性选择的预览
 	const s_attr_preview_attrs = Array.from(attrPreview.querySelectorAll(".attrs .attr"));
-	function s_attr_onclick(){
-		const attrIdx = parseInt(this.name[this.name.length-1],10) - 1;
-		const valueFlag = parseInt(this.value, 2);
-		const values = flags(valueFlag);
-		let attr = values.length === 1 ? values[0] : 'any';
-		if (attrIdx>0 && attr === 6) attr = -1;
-		s_attr_preview_attrs[attrIdx].dataset.attr = attr;
-	}
-	s_attr_lists.forEach(s_attr_list=>
-		s_attr_list.forEach(s_attr=>{
-			s_attr.onclick = s_attr_onclick;
-			if (s_attr.checked) s_attr.onclick();
-		})
-	);
+	
+	const s_AttrForm = document.getElementById("search-attr");
+	s_AttrForm.onchange = function(event){
+		event?.preventDefault();
+		const formData = new FormData(this);
+		for (let i = 0; i <= 2; i++) {
+			const attr = parseInt(formData.get(`attr-${i+1}`),10);
+			s_attr_preview_attrs[i].dataset.attr = Number.isNaN(attr) ? "any" : attr;
+		}
+	}
+	s_AttrForm.onreset = function(event){
+		s_attr_preview_attrs.forEach(node=>node.dataset.attr = "any");
+	};
+
 	//可以自行打开图片设定头像的彩蛋
 	const avatarSelect = attrPreview.querySelector("#avatar-select");
 	const customAvatar = attrPreview.querySelector(".custom-avatar");
@@ -5133,11 +5132,12 @@ function initialize() {
 	searchBox.recoverySearchStatus = function({attrs, fixMainColor, types, typeAndOr, rares, awokens, sawokens, equalAk, incSawoken, canAssist, canLv110, is8Latent, notWeapon, specialFilters}) {
 		//属性这里是用的2进制写
 		attrs.forEach((attr, ai)=>{
-			const attr_list = s_attr_lists[ai];
-			let ipt = attr_list.find(opt=>parseInt(opt.value,2) == attr) || attr_list[0];
-			ipt.checked = true;
-			ipt.onclick();
+			const inputs = Array.from(document.getElementsByName(`attr-${ai+1}`));
+			inputs.forEach(ipt=>{
+				ipt.checked = Boolean(attr & 1 << parseInt(ipt.value, 10));
+			});
 		});
+		s_AttrForm.onchange();
 		s_fixMainColor.checked = fixMainColor;
 		s_types.forEach(opt=>opt.checked = types.includes(parseInt(opt.value,10)));
 		s_typeAndOr.checked = typeAndOr;
@@ -5178,7 +5178,14 @@ function initialize() {
 	}
 	//导出当前的搜索状态
 	searchBox.getSearchOptions = function(){
-		const attrs = s_attr_lists.map(list=>Number(returnRadiosValue(list)) || 0);
+		const attrs = (function(formData){
+			const attrsArr = [];
+			for (let i = 0; i <= 2; i++) {
+				const attrNum = reflags(formData.getAll(`attr-${i+1}`).map(Str2Int));
+				attrsArr.push(attrNum);
+			}
+			return attrsArr;
+		})(new FormData(s_AttrForm));
 		const types = returnCheckBoxsValues(s_types).map(Str2Int);
 		const rares = returnCheckBoxsValues(s_rareChecks).map(Str2Int);
 		const sawokens = returnCheckBoxsValues(s_sawokens).map(Str2Int);
@@ -5248,10 +5255,7 @@ function initialize() {
 		searchMonList.classList.add(className_displayNone);
 	};
 	searchClear.onclick = function() { //清空搜索选项
-		s_attr_lists.forEach(list=>{
-			list[0].checked = true;
-			list[0].onclick();
-		});
+		s_AttrForm.reset();
 		s_types.forEach(t => {
 			t.checked = false;
 		});
diff --git a/service-worker.js b/service-worker.js
index dffe644e..2053f4cd 100644
--- a/service-worker.js
+++ b/service-worker.js
@@ -25483,7 +25483,7 @@ const cachesMap = new Map([
 	],
 	[
 		"fonts/fa-solid-900.woff2",
-		"6c4eee562650e53cee32496bdfbe534b"
+		"1ec0ba058c021acf7feaa18081445d63"
 	],
 	[
 		"fonts/FOT-KurokaneStd-EB.woff2",
@@ -25503,7 +25503,7 @@ const cachesMap = new Map([
 	],
 	[
 		"multi.html",
-		"475bd7b4755f476d625e34082c4a780a"
+		"f30df83eaac9f7df6dbb422b2df2d11f"
 	],
 	[
 		"script-custom_elements.js",
@@ -25519,15 +25519,15 @@ const cachesMap = new Map([
 	],
 	[
 		"script-universal_function.js",
-		"9545d2373ad30a645163ee78561c12a9"
+		"d0be9845a7b584b3a5699e39c55c146d"
 	],
 	[
 		"script.js",
-		"847e2e54a07c97f5bf0b6df87848b3b4"
+		"c8873f00986bca39236317543a3a3985"
 	],
 	[
 		"solo.html",
-		"fd72b47437620ac3d36c1c14c6dca18b"
+		"19ece08cfb767949c4ec60f1621bb456"
 	],
 	[
 		"style-monsterimages.css",
@@ -25535,7 +25535,7 @@ const cachesMap = new Map([
 	],
 	[
 		"style.css",
-		"80ff7251f60ab0ba92b9acc76fa8382c"
+		"8d9ff894662f1ab5ea926439d43bc820"
 	],
 	[
 		"temp.js",
@@ -25543,11 +25543,11 @@ const cachesMap = new Map([
 	],
 	[
 		"triple.html",
-		"a09e3bf9f4d43be385ec83b772a33ff8"
+		"bcb2e5b2bec153ec15bc97e9f7c0488e"
 	],
 	[
 		"languages/en.css",
-		"f8865fcbe06b9a998ffadb31bd491d25"
+		"e5a21ebe0953c072015a9ffc89a32589"
 	],
 	[
 		"languages/en.js",
@@ -25555,7 +25555,7 @@ const cachesMap = new Map([
 	],
 	[
 		"languages/ja.css",
-		"2388b1bcb557d2e4e3138ab227697d13"
+		"3f799231dc30a264b17fd0c56963bce7"
 	],
 	[
 		"languages/ja.js",
@@ -25563,7 +25563,7 @@ const cachesMap = new Map([
 	],
 	[
 		"languages/ko.css",
-		"e1c95e5707f59ea1889d6b3623cf5ceb"
+		"530f343e7422816a3db9fbeb0b6c64ed"
 	],
 	[
 		"languages/ko.js",
@@ -25575,7 +25575,7 @@ const cachesMap = new Map([
 	],
 	[
 		"languages/zh-hans.css",
-		"aeb10819542512dfa75ed2252840fc99"
+		"3ce8d2a490a532f4d5084bbe46c00cbd"
 	],
 	[
 		"languages/zh-hans.js",
@@ -25583,7 +25583,7 @@ const cachesMap = new Map([
 	],
 	[
 		"languages/zh-hant.css",
-		"00f2e72323d77860257fce2827216a46"
+		"96920dbb7191e9e32c948165b820a3b7"
 	],
 	[
 		"languages/zh-hant.js",
diff --git a/solo.html b/solo.html
index 3fcea29c..d149c253 100644
--- a/solo.html
+++ b/solo.html
@@ -570,41 +570,38 @@ const teamsCount = 1;
 					<input type="file" accept="image/*" id="avatar-select" />
 					<canvas class="custom-avatar" width="100" height="100"></canvas>
 					<div class="attrs">
-						<div class="attr"></div>
-						<div class="attr"></div>
-						<div class="attr"></div>
+						<div class="attr" data-attr="any"></div>
+						<div class="attr" data-attr="any"></div>
+						<div class="attr" data-attr="any"></div>
 					</div>
 				</label>
 				<div class="attr-selecter-list">
 					<ul class="attr-list horizontally-radio-list">
-						<li><input type="radio" name="attr-1" class="attr-radio" value="0b1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
-						<li><input type="radio" name="attr-1" class="attr-radio" value="0b0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
-						<li><input type="radio" name="attr-1" class="attr-radio" value="0b0000010" id="search-attr-1-1" /><label for="search-attr-1-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
-						<li><input type="radio" name="attr-1" class="attr-radio" value="0b0000100" id="search-attr-1-2" /><label for="search-attr-1-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
-						<li><input type="radio" name="attr-1" class="attr-radio" value="0b0001000" id="search-attr-1-3" /><label for="search-attr-1-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
-						<li><input type="radio" name="attr-1" class="attr-radio" value="0b0010000" id="search-attr-1-4" /><label for="search-attr-1-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
-						<li><input type="radio" name="attr-1" class="attr-radio" value="0b1000000" id="search-attr-1-6" /><label for="search-attr-1-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无主属性-->
+						<li><input type="checkbox" name="attr-1" value="0" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
+						<li><input type="checkbox" name="attr-1" value="1" id="search-attr-1-1" /><label for="search-attr-1-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
+						<li><input type="checkbox" name="attr-1" value="2" id="search-attr-1-2" /><label for="search-attr-1-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
+						<li><input type="checkbox" name="attr-1" value="3" id="search-attr-1-3" /><label for="search-attr-1-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
+						<li><input type="checkbox" name="attr-1" value="4" id="search-attr-1-4" /><label for="search-attr-1-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
+						<li><input type="checkbox" name="attr-1" value="6" id="search-attr-1-6" /><label for="search-attr-1-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无主属性-->
 					</ul>
 					<ul class="attr-list horizontally-radio-list">
-						<li><input type="radio" name="attr-2" class="attr-radio" value="0b1111111" id="search-attr-2-any" checked/><label for="search-attr-2-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
-						<li><input type="radio" name="attr-2" class="attr-radio" value="0b0000001" id="search-attr-2-0" /><label for="search-attr-2-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
-						<li><input type="radio" name="attr-2" class="attr-radio" value="0b0000010" id="search-attr-2-1" /><label for="search-attr-2-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
-						<li><input type="radio" name="attr-2" class="attr-radio" value="0b0000100" id="search-attr-2-2" /><label for="search-attr-2-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
-						<li><input type="radio" name="attr-2" class="attr-radio" value="0b0001000" id="search-attr-2-3" /><label for="search-attr-2-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
-						<li><input type="radio" name="attr-2" class="attr-radio" value="0b0010000" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
-						<li><input type="radio" name="attr-2" class="attr-radio" value="0b1000000" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
+						<li><input type="checkbox" name="attr-2" value="0" id="search-attr-2-0" /><label for="search-attr-2-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
+						<li><input type="checkbox" name="attr-2" value="1" id="search-attr-2-1" /><label for="search-attr-2-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
+						<li><input type="checkbox" name="attr-2" value="2" id="search-attr-2-2" /><label for="search-attr-2-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
+						<li><input type="checkbox" name="attr-2" value="3" id="search-attr-2-3" /><label for="search-attr-2-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
+						<li><input type="checkbox" name="attr-2" value="4" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
+						<li><input type="checkbox" name="attr-2" value="6" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
 					</ul>
 					<ul class="attr-list horizontally-radio-list">
-						<li><input type="radio" name="attr-3" class="attr-radio" value="0b1111111" id="search-attr-3-any" checked/><label for="search-attr-3-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
-						<li><input type="radio" name="attr-3" class="attr-radio" value="0b0000001" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
-						<li><input type="radio" name="attr-3" class="attr-radio" value="0b0000010" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
-						<li><input type="radio" name="attr-3" class="attr-radio" value="0b0000100" id="search-attr-3-2" /><label for="search-attr-3-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
-						<li><input type="radio" name="attr-3" class="attr-radio" value="0b0001000" id="search-attr-3-3" /><label for="search-attr-3-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
-						<li><input type="radio" name="attr-3" class="attr-radio" value="0b0010000" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
-						<li><input type="radio" name="attr-3" class="attr-radio" value="0b1000000" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
+						<li><input type="checkbox" name="attr-3" value="0" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
+						<li><input type="checkbox" name="attr-3" value="1" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
+						<li><input type="checkbox" name="attr-3" value="2" id="search-attr-3-2" /><label for="search-attr-3-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
+						<li><input type="checkbox" name="attr-3" value="3" id="search-attr-3-3" /><label for="search-attr-3-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
+						<li><input type="checkbox" name="attr-3" value="4" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
+						<li><input type="checkbox" name="attr-3" value="6" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
 					</ul>
 				</div>
-				<button id="attr-clear" class="brown-button"></button>
+				<button id="attr-clear" type="reset" class="brown-button"></button>
 				<div class="options"><button id="avatar-save" type="button" class="display-none">💾</button><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label for="fix-main-color"></label></div>
 			</form>
 			<div class="types-div"><!--类型-->
diff --git a/style.css b/style.css
index cc6376d4..a093fa1d 100644
--- a/style.css
+++ b/style.css
@@ -284,7 +284,7 @@ input[type="checkbox"].switch-ipt+label::before{
 	width: 2em;
 	height: 1.1em;
 	border-radius: 0.5em;
-	background-image: radial-gradient(white 50%, transparent 50.1%);
+	background-image: radial-gradient(white 40%, black 50%, transparent 50%);
 	background-size: 1.1em 1.1em;
 	background-repeat: no-repeat;
 	transition: .3s ease-out;
@@ -1671,11 +1671,11 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
 #search-attr {
 	display: grid;
 	grid-auto-rows: min-content;
-	grid-template-columns: 100px 400px 30px auto;
+	grid-template-columns: 100px 340px 30px auto;
 	grid-gap: 3px;
 }
 #search-attr .options {
-	grid-column: 1 / 4;
+	grid-column: 1 / 5;
 	grid-row: 2 / 3;
 }
 #search-attr .monster .custom-avatar {
@@ -1708,9 +1708,13 @@ body:not(.solo) .awoken-icon[data-awoken-icon="64"]::after
 #search-attr .attr-list>li {
 	width: 55px;
 }
-.search-box .attrs-div .attr-list label {
+#search-attr .attr-list input {
+	display: none;
+}
+#search-attr .attr-list label {
 	width: 100%;
 	height: 100%;
+	opacity: unset;
 }
 .types-div::before,
 .awoken-div::before,
@@ -4190,7 +4194,7 @@ body.external-link-support #external-support{
 	background-repeat: no-repeat;
 }
 .icon-skill,
-.attrs-div .attr-list .attr,
+#search-attr .attr-list .attr,
 .skill-datail-parsed icon:where(.attr,.orb,.type-icon,.awoken-icon)
 {
 	vertical-align: bottom;
diff --git a/triple.html b/triple.html
index 32d15f25..9eb84a36 100644
--- a/triple.html
+++ b/triple.html
@@ -57,23 +57,23 @@ const teamsCount = 3;
 		<div>
 			<a class="down-capture display-none" target="_blank"></a>
 			<button class="btn-qrcode fa"></button>
-			<button id="draw-screenshot"><input type="checkbox" id="screenshot-transparent"><label for="screenshot-transparent">透明</label></button>
+			<button id="draw-screenshot"><input type="checkbox" id="screenshot-transparent"><label for="screenshot-transparent"></label></button>
 			<label for="default-level"></label><input id="default-level" type="number" min="1" max="120" placeholder="110"/>
-			<input type="checkbox" name="change-swap-to-copy" id="change-swap-to-copy"><label class="switch-lbl" for="change-swap-to-copy"></label>
+			<input type="checkbox" name="change-swap-to-copy" id="change-swap-to-copy"><label for="change-swap-to-copy"></label>
 		</div>
 		<details class="config-display-list">
 			<summary></summary>
-			<input type="checkbox" class="switch-ipt" id="show-card-id"><label class="switch-lbl" for="show-card-id"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-card-rarity"><label class="switch-lbl" for="show-card-rarity"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-skill-cd"><label class="switch-lbl" for="show-member-skill-cd"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-ability"><label class="switch-lbl" for="show-member-ability"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-types"><label class="switch-lbl" for="show-member-types"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-member-awoken"><label class="switch-lbl" for="show-member-awoken"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-total-info"><label class="switch-lbl" for="show-team-total-info"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-attrtype-count"><label class="switch-lbl" for="show-team-attrtype-count"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-awoken-effect"><label class="switch-lbl" for="show-team-awoken-effect"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-team-awoken-count"><label class="switch-lbl" for="show-team-awoken-count"><circle></circle></label>
-			<input type="checkbox" class="switch-ipt" id="show-rich-text-tools"><label class="switch-lbl" for="show-rich-text-tools"><circle></circle></label>
+			<input type="checkbox" class="switch-ipt" id="show-card-id"><label for="show-card-id"></label>
+			<input type="checkbox" class="switch-ipt" id="show-card-rarity"><label for="show-card-rarity"></label>
+			<input type="checkbox" class="switch-ipt" id="show-member-skill-cd"><label for="show-member-skill-cd"></label>
+			<input type="checkbox" class="switch-ipt" id="show-member-ability"><label for="show-member-ability"></label>
+			<input type="checkbox" class="switch-ipt" id="show-member-types"><label for="show-member-types"></label>
+			<input type="checkbox" class="switch-ipt" id="show-member-awoken"><label for="show-member-awoken"></label>
+			<input type="checkbox" class="switch-ipt" id="show-team-total-info"><label for="show-team-total-info"></label>
+			<input type="checkbox" class="switch-ipt" id="show-team-attrtype-count"><label for="show-team-attrtype-count"></label>
+			<input type="checkbox" class="switch-ipt" id="show-team-awoken-effect"><label for="show-team-awoken-effect"></label>
+			<input type="checkbox" class="switch-ipt" id="show-team-awoken-count"><label for="show-team-awoken-count"></label>
+			<input type="checkbox" class="switch-ipt" id="show-rich-text-tools"><label for="show-rich-text-tools"></label>
 		</details>
 		<div class="status"></div>
 		<div>
@@ -1503,51 +1503,51 @@ const teamsCount = 3;
 		<button id="insert-latent-icon" title="Insert Latent Icon"></button>
 		<button id="insert-type-icon" title="Insert Type Icon"></button>
 		<button id="insert-orb-icon" title="Insert Orb Icon"></button>
-		<input type="checkbox" class="switch-ipt" id="siwtch-code-mode"><label class="switch-lbl" for="siwtch-code-mode" title="Code Mode"><circle></circle></label>
+		<input type="checkbox" class="switch-ipt" id="siwtch-code-mode"><label for="siwtch-code-mode" title="Code Mode"></label>
 	</div>
 	<div class="edit-box display-none">
 		<div class="edit-box-title"><!--修改怪物--></div>
 		<details class="search-box">
 			<summary></summary>
-			<div class="attrs-div"><!--属性-->
+			<form id="search-attr" class="attrs-div"><!--属性-->
 				<label class="monster" for="avatar-select">
 					<input type="file" accept="image/*" id="avatar-select" />
 					<canvas class="custom-avatar" width="100" height="100"></canvas>
 					<div class="attrs">
-						<div class="attr"></div>
-						<div class="attr"></div>
-						<div class="attr"></div>
+						<div class="attr" data-attr="any"></div>
+						<div class="attr" data-attr="any"></div>
+						<div class="attr" data-attr="any"></div>
 					</div>
 				</label>
-				<ul class="attr-list">
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b1111111" id="search-attr-1-any" checked/><label for="search-attr-1-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b0000001" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b0000010" id="search-attr-1-1" /><label for="search-attr-1-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b0000100" id="search-attr-1-2" /><label for="search-attr-1-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b0001000" id="search-attr-1-3" /><label for="search-attr-1-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b0010000" id="search-attr-1-4" /><label for="search-attr-1-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0b1000000" id="search-attr-1-6" /><label for="search-attr-1-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无主属性-->
-				</ul>
-				<ul class="attr-list">
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b1111111" id="search-attr-2-any" checked/><label for="search-attr-2-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b0000001" id="search-attr-2-0" /><label for="search-attr-2-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b0000010" id="search-attr-2-1" /><label for="search-attr-2-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b0000100" id="search-attr-2-2" /><label for="search-attr-2-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b0001000" id="search-attr-2-3" /><label for="search-attr-2-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b0010000" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0b1000000" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
-				</ul>
-				<ul class="attr-list">
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b1111111" id="search-attr-3-any" checked/><label for="search-attr-3-any"><span class="attr" data-attr-icon="any"></span></label></li><!--任意-->
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b0000001" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b0000010" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b0000100" id="search-attr-3-2" /><label for="search-attr-3-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b0001000" id="search-attr-3-3" /><label for="search-attr-3-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b0010000" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
-					<li><input type="radio" name="attr-3" class="attr-radio" value="0b1000000" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
-				</ul>
-				<div class="options"><button id="avatar-save" class="display-none">💾</button><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label class="switch-lbl" for="fix-main-color"></label></div>
-			</div>
+				<div class="attr-selecter-list">
+					<ul class="attr-list horizontally-radio-list">
+						<li><input type="checkbox" name="attr-1" value="0" id="search-attr-1-0" /><label for="search-attr-1-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
+						<li><input type="checkbox" name="attr-1" value="1" id="search-attr-1-1" /><label for="search-attr-1-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
+						<li><input type="checkbox" name="attr-1" value="2" id="search-attr-1-2" /><label for="search-attr-1-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
+						<li><input type="checkbox" name="attr-1" value="3" id="search-attr-1-3" /><label for="search-attr-1-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
+						<li><input type="checkbox" name="attr-1" value="4" id="search-attr-1-4" /><label for="search-attr-1-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
+						<li><input type="checkbox" name="attr-1" value="6" id="search-attr-1-6" /><label for="search-attr-1-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无主属性-->
+					</ul>
+					<ul class="attr-list horizontally-radio-list">
+						<li><input type="checkbox" name="attr-2" value="0" id="search-attr-2-0" /><label for="search-attr-2-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
+						<li><input type="checkbox" name="attr-2" value="1" id="search-attr-2-1" /><label for="search-attr-2-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
+						<li><input type="checkbox" name="attr-2" value="2" id="search-attr-2-2" /><label for="search-attr-2-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
+						<li><input type="checkbox" name="attr-2" value="3" id="search-attr-2-3" /><label for="search-attr-2-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
+						<li><input type="checkbox" name="attr-2" value="4" id="search-attr-2-4" /><label for="search-attr-2-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
+						<li><input type="checkbox" name="attr-2" value="6" id="search-attr-2-6" /><label for="search-attr-2-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
+					</ul>
+					<ul class="attr-list horizontally-radio-list">
+						<li><input type="checkbox" name="attr-3" value="0" id="search-attr-3-0" /><label for="search-attr-3-0"><span class="attr" data-attr-icon="0"></span></label></li><!--火-->
+						<li><input type="checkbox" name="attr-3" value="1" id="search-attr-3-1" /><label for="search-attr-3-1"><span class="attr" data-attr-icon="1"></span></label></li><!--水-->
+						<li><input type="checkbox" name="attr-3" value="2" id="search-attr-3-2" /><label for="search-attr-3-2"><span class="attr" data-attr-icon="2"></span></label></li><!--木-->
+						<li><input type="checkbox" name="attr-3" value="3" id="search-attr-3-3" /><label for="search-attr-3-3"><span class="attr" data-attr-icon="3"></span></label></li><!--光-->
+						<li><input type="checkbox" name="attr-3" value="4" id="search-attr-3-4" /><label for="search-attr-3-4"><span class="attr" data-attr-icon="4"></span></label></li><!--暗-->
+						<li><input type="checkbox" name="attr-3" value="6" id="search-attr-3-6" /><label for="search-attr-3-6"><span class="attr" data-attr-icon="6"></span></label></li><!--无副属性-->
+					</ul>
+				</div>
+				<button id="attr-clear" type="reset" class="brown-button"></button>
+				<div class="options"><button id="avatar-save" type="button" class="display-none">💾</button><input type="checkbox" name="fix-main-color" id="fix-main-color" checked><label for="fix-main-color"></label></div>
+			</form>
 			<div class="types-div"><!--类型-->
 				<ul class="type-list">
 					<li data-type-icon="5"><input type="checkbox" class="type-check" name="types" value="5" id="search-type-5" /><label class="type-icon" data-type-icon="5" for="search-type-5"><!--神--></label></li>
@@ -1564,7 +1564,7 @@ const teamsCount = 3;
 					<li data-type-icon="15"><input type="checkbox" class="type-check" name="types" value="15" id="search-type-15" /><label class="type-icon" data-type-icon="15" for="search-type-15"><!--販賣用--></label></li>
 					<!--<li><input type="checkbox" class="type-check" name="types" value="9" id="search-type-9" /><label class="display-none" data-type-icon="9" for="search-type-9"></label></li>--><!--特别保护-->
 				</ul>
-				<input type="checkbox" class="switch-ipt" name="type-and-or" id="type-and-or" checked><label class="switch-lbl" for="type-and-or"><circle></circle></label>
+				<input type="checkbox" class="switch-ipt" name="type-and-or" id="type-and-or" checked><label for="type-and-or"></label>
 				<ul class="latent-ul">
 					<li class="latent-icon" data-latent-icon="20"></li><!--神杀-->
 					<li class="latent-icon" data-latent-icon="21"></li><!--龙杀-->
@@ -1593,9 +1593,9 @@ const teamsCount = 3;
 			</div>
 			<div class="awoken-div"><!--觉醒-->
 				<div class="awoken-option"><!--觉醒搜索选项开关-->
-					<input type="checkbox" name="consider-equivalent-awoken" id="consider-equivalent-awoken" checked><label class="switch-lbl" for="consider-equivalent-awoken"></label>
-					<input type="checkbox" class="switch-ipt" name="include-super-awoken" id="include-super-awoken" checked><label class="switch-lbl" for="include-super-awoken"><circle></circle></label>
-					<input type="checkbox" class="switch-ipt" name="show-official-awoken-sorting" id="show-official-awoken-sorting"><label class="switch-lbl" for="show-official-awoken-sorting"><circle></circle></label>
+					<input type="checkbox" name="consider-equivalent-awoken" id="consider-equivalent-awoken" checked><label for="consider-equivalent-awoken"></label>
+					<input type="checkbox" class="switch-ipt" name="include-super-awoken" id="include-super-awoken" checked><label for="include-super-awoken"></label>
+					<input type="checkbox" class="switch-ipt" name="show-official-awoken-sorting" id="show-official-awoken-sorting"><label for="show-official-awoken-sorting"></label>
 				</div>
 				<div class="selected-awokens-div"><!--选中的觉醒列表-->
 					<ul class="awoken-ul selected-awokens">
@@ -1881,10 +1881,10 @@ const teamsCount = 3;
 				</ul>
 			</div>
 			<div class="fast-switch">
-				<input type="checkbox" name="can-assist" id="can-assist"><label class="switch-lbl" for="can-assist"></label>
-				<input type="checkbox" name="can-level-limit-breakthrough" id="can-level-limit-breakthrough"><label class="switch-lbl" for="can-level-limit-breakthrough"></label>
-				<input type="checkbox" name="have-8-latent-slot" id="have-8-latent-slot"><label class="switch-lbl" for="have-8-latent-slot"></label>
-				<input type="checkbox" name="not-weapon" id="not-weapon"><label class="switch-lbl" for="not-weapon"></label>
+				<input type="checkbox" name="can-assist" id="can-assist"><label for="can-assist"></label>
+				<input type="checkbox" name="can-level-limit-breakthrough" id="can-level-limit-breakthrough"><label for="can-level-limit-breakthrough"></label>
+				<input type="checkbox" name="have-8-latent-slot" id="have-8-latent-slot"><label for="have-8-latent-slot"></label>
+				<input type="checkbox" name="not-weapon" id="not-weapon"><label for="not-weapon"></label>
 			</div>
 			<div class="control-div"><!--控制栏-->
 				<button class="search-start"><!--开始搜索--></button>
@@ -1892,14 +1892,14 @@ const teamsCount = 3;
 				<button class="search-clear"><!--清空搜索条件--></button>
 				<button class="search-share"><!--分享搜索内容--></button>
 				<div class="additional-div"><!--额外显示栏-->
-					<input type="checkbox" class="switch-ipt" name="add-show-CD" id="add-show-CD"><label class="switch-lbl" for="add-show-CD"><circle></circle></label>
-					<input type="checkbox" class="switch-ipt" name="add-show-abilities" id="add-show-abilities"><label class="switch-lbl" for="add-show-abilities"><circle></circle></label>
-					<input type="checkbox" class="switch-ipt" name="add-show-abilities-with-awoken" id="add-show-abilities-with-awoken"><label class="switch-lbl" for="add-show-abilities-with-awoken"><circle></circle></label>
-					<input type="checkbox" class="switch-ipt" name="add-show-awoken" id="add-show-awoken"><label class="switch-lbl" for="add-show-awoken"><circle></circle></label>
+					<input type="checkbox" class="switch-ipt" name="add-show-CD" id="add-show-CD"><label for="add-show-CD"></label>
+					<input type="checkbox" class="switch-ipt" name="add-show-abilities" id="add-show-abilities"><label for="add-show-abilities"></label>
+					<input type="checkbox" class="switch-ipt" name="add-show-abilities-with-awoken" id="add-show-abilities-with-awoken"><label for="add-show-abilities-with-awoken"></label>
+					<input type="checkbox" class="switch-ipt" name="add-show-awoken" id="add-show-awoken"><label for="add-show-awoken"></label>
 				</div>
 				<div class="sort-div"><!--排序栏-->
 					<select class="sort-list"></select>
-					<input type="checkbox" class="switch-ipt" name="sort-reverse" id="sort-reverse"><label class="switch-lbl" for="sort-reverse"><circle></circle></label>
+					<input type="checkbox" class="switch-ipt" name="sort-reverse" id="sort-reverse"><label for="sort-reverse"></label>
 					<div class="search-list-length"></div>
 				</div>
 			</div>
@@ -2098,8 +2098,8 @@ const teamsCount = 3;
 					<div class="skill-box">
 						<div class="skill-title"><div class="type-title"></div><span class="skill-name"></span>
 							<div class="skill-parse-control">
-								<input type="checkbox" class="switch-ipt" name="show-skill-original" id="show-skill-original"><label class="switch-lbl" for="show-skill-original"><circle></circle></label>
-								<input type="checkbox" class="switch-ipt" name="merge-skill" id="merge-skill" checked><label class="switch-lbl" for="merge-skill"><circle></circle></label>
+								<input type="checkbox" class="switch-ipt" name="show-skill-original" id="show-skill-original"><label for="show-skill-original"></label>
+								<input type="checkbox" class="switch-ipt" name="merge-skill" id="merge-skill" checked><label for="merge-skill"></label>
 							</div>
 						</div>
 						<div class="skill-datail-original"></div>
@@ -2158,7 +2158,7 @@ const teamsCount = 3;
 				</div>
 			</div>
 			<div class="save-qr-box">
-				<ul class="qr-data-type-ul">
+				<ul class="qr-data-type-ul horizontally-radio-list">
 					<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="paddf" id="qr-data-type-pdf" checked/><label for="qr-data-type-pdf"></label></li><!--本程序-->
 					<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="pdc" id="qr-data-type-pdc" /><label for="qr-data-type-pdc"></label></li><!--PDC-->
 					<li><input type="radio" name="qr-data-type" class="qr-data-type-radio" value="daddb" id="qr-data-type-daddb" /><label for="qr-data-type-daddb"></label></li><!--DADDB-->
@@ -2268,7 +2268,7 @@ const teamsCount = 3;
 			<button class="upload-data brown-button fa"></button>
 			<input type="file" class="file-select display-none" multiple/>
 			<a class="how-to-use" target="_blank" href="doc/export-player-data.html"></a>
-			<input type="checkbox" name="box-have" id="box-have"><label class="switch-lbl" for="box-have"></label>
+			<input type="checkbox" name="box-have" id="box-have"><label for="box-have"></label>
 		</div>
 		<div class="mask-content">
 			<ul class="player-datas-list"></ul>