重新调整属性的显示方式

multi.html

@@ -451,22 +451,22 @@ var formation = new Formation(teamsCount,5);
 		<div class="search-box display-none">
 			<div class="attrs-div"><!--属性-->
 				<ul class="attr-list attr-list-1">
-					<li><input type="radio" name="attr-1" class="attr-radio" value="all" id="search-attr-1-any" checked/><label class="attr" data-attr-icon="any" for="search-attr-1-any"><!--任意--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0" id="search-attr-1-0" /><label class="attr" data-attr-icon="0" for="search-attr-1-0"><!--火--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="1" id="search-attr-1-1" /><label class="attr" data-attr-icon="1" for="search-attr-1-1"><!--水--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="2" id="search-attr-1-2" /><label class="attr" data-attr-icon="2" for="search-attr-1-2"><!--木--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="3" id="search-attr-1-3" /><label class="attr" data-attr-icon="3" for="search-attr-1-3"><!--光--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="4" id="search-attr-1-4" /><label class="attr" data-attr-icon="4" for="search-attr-1-4"><!--暗--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="6" id="search-attr-1-6" /><label class="attr" data-attr-icon="6" for="search-attr-1-6"><!--无主属性--></label></li>
+					<li><input type="radio" name="attr-1" class="attr-radio" value="all" 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="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="radio" name="attr-1" class="attr-radio" 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="radio" name="attr-1" class="attr-radio" 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="radio" name="attr-1" class="attr-radio" 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="radio" name="attr-1" class="attr-radio" 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="radio" name="attr-1" class="attr-radio" 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 attr-list-2">
-					<li><input type="radio" name="attr-2" class="attr-radio" value="all" id="search-attr-2-any" checked/><label class="attr" data-attr-icon="any" for="search-attr-2-any"><!--任意--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0" id="search-attr-2-0" /><label class="attr" data-attr-icon="0" for="search-attr-2-0"><!--火--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="1" id="search-attr-2-1" /><label class="attr" data-attr-icon="1" for="search-attr-2-1"><!--水--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="2" id="search-attr-2-2" /><label class="attr" data-attr-icon="2" for="search-attr-2-2"><!--木--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="3" id="search-attr-2-3" /><label class="attr" data-attr-icon="3" for="search-attr-2-3"><!--光--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="4" id="search-attr-2-4" /><label class="attr" data-attr-icon="4" for="search-attr-2-4"><!--暗--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="-1" id="search-attr-2-none" /><label class="attr" data-attr-icon="-1" for="search-attr-2-none"><!--无--></label></li>
+					<li><input type="radio" name="attr-2" class="attr-radio" value="all" 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="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="radio" name="attr-2" class="attr-radio" 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="radio" name="attr-2" class="attr-radio" 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="radio" name="attr-2" class="attr-radio" 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="radio" name="attr-2" class="attr-radio" 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="radio" name="attr-2" class="attr-radio" value="-1" id="search-attr-2-none" /><label for="search-attr-2-none"><span class="attr" data-attr-icon="-1"></span></label></li><!--无-->
 				</ul>
 				<input type="checkbox" class="config-checkbox-ipt" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"><div class="config-checkbox-lbl-cicle"></div></label>
 			</div>

solo.html

@@ -401,22 +401,22 @@ var formation = new Formation(teamsCount,6);
 		<div class="search-box display-none">
 			<div class="attrs-div"><!--属性-->
 				<ul class="attr-list attr-list-1">
-					<li><input type="radio" name="attr-1" class="attr-radio" value="all" id="search-attr-1-any" checked/><label class="attr" data-attr-icon="any" for="search-attr-1-any"><!--任意--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0" id="search-attr-1-0" /><label class="attr" data-attr-icon="0" for="search-attr-1-0"><!--火--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="1" id="search-attr-1-1" /><label class="attr" data-attr-icon="1" for="search-attr-1-1"><!--水--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="2" id="search-attr-1-2" /><label class="attr" data-attr-icon="2" for="search-attr-1-2"><!--木--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="3" id="search-attr-1-3" /><label class="attr" data-attr-icon="3" for="search-attr-1-3"><!--光--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="4" id="search-attr-1-4" /><label class="attr" data-attr-icon="4" for="search-attr-1-4"><!--暗--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="6" id="search-attr-1-6" /><label class="attr" data-attr-icon="6" for="search-attr-1-6"><!--无主属性--></label></li>
+					<li><input type="radio" name="attr-1" class="attr-radio" value="all" 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="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="radio" name="attr-1" class="attr-radio" 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="radio" name="attr-1" class="attr-radio" 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="radio" name="attr-1" class="attr-radio" 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="radio" name="attr-1" class="attr-radio" 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="radio" name="attr-1" class="attr-radio" 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 attr-list-2">
-					<li><input type="radio" name="attr-2" class="attr-radio" value="all" id="search-attr-2-any" checked/><label class="attr" data-attr-icon="any" for="search-attr-2-any"><!--任意--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0" id="search-attr-2-0" /><label class="attr" data-attr-icon="0" for="search-attr-2-0"><!--火--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="1" id="search-attr-2-1" /><label class="attr" data-attr-icon="1" for="search-attr-2-1"><!--水--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="2" id="search-attr-2-2" /><label class="attr" data-attr-icon="2" for="search-attr-2-2"><!--木--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="3" id="search-attr-2-3" /><label class="attr" data-attr-icon="3" for="search-attr-2-3"><!--光--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="4" id="search-attr-2-4" /><label class="attr" data-attr-icon="4" for="search-attr-2-4"><!--暗--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="-1" id="search-attr-2-none" /><label class="attr" data-attr-icon="-1" for="search-attr-2-none"><!--无--></label></li>
+					<li><input type="radio" name="attr-2" class="attr-radio" value="all" 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="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="radio" name="attr-2" class="attr-radio" 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="radio" name="attr-2" class="attr-radio" 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="radio" name="attr-2" class="attr-radio" 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="radio" name="attr-2" class="attr-radio" 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="radio" name="attr-2" class="attr-radio" value="-1" id="search-attr-2-none" /><label for="search-attr-2-none"><span class="attr" data-attr-icon="-1"></span></label></li><!--无-->
 				</ul>
 				<input type="checkbox" class="config-checkbox-ipt" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"><div class="config-checkbox-lbl-cicle"></div></label>
 			</div>

style-monsterimages.css

@@ -903,10 +903,9 @@
 	background-position-y:calc(-30px * 17);
 }
 
-/*搜索框中用到的属性图片*/
-.attr::before
+/*属性图片*/
+.attr
 {
-	content:"";
 	display: inline-block;
 	width: 32px;
 	height: 32px;
@@ -914,36 +913,40 @@
 	background-position-y:calc(32px);
 	background-repeat: no-repeat;
 }
-.attr[data-attr-icon='any']::before
+.attr[data-attr-icon='any']
 {
 	background-position-x: -32px;
 	background-position-y:calc(-32px * 0);
 }
-.attr[data-attr-icon='0']::before
+.attr[data-attr-icon='-1']
+{
+	width: auto;
+}
+.attr[data-attr-icon='0']
 {
 	background-position-y:calc(-32px * 0);
 }
-.attr[data-attr-icon='1']::before
+.attr[data-attr-icon='1']
 {
 	background-position-y:calc(-32px * 1);
 }
-.attr[data-attr-icon='2']::before
+.attr[data-attr-icon='2']
 {
 	background-position-y:calc(-32px * 2);
 }
-.attr[data-attr-icon='3']::before
+.attr[data-attr-icon='3']
 {
 	background-position-y:calc(-32px * 3);
 }
-.attr[data-attr-icon='4']::before
+.attr[data-attr-icon='4']
 {
 	background-position-y:calc(-32px * 4);
 }
-.attr[data-attr-icon='5']::before
+.attr[data-attr-icon='5']
 {
 	background-position-y:calc(-32px * 5);
 }
-.attr[data-attr-icon='6']::before
+.attr[data-attr-icon='6']
 {
 	background-position-y:calc(-32px * 6);
 }

style.css

@@ -973,7 +973,7 @@ ul{
 .attrs-div .attr-list>li:last-of-type{
 	border-radius: 0 8px 8px 0;
 }
-.attrs-div .attr-list .attr
+.attrs-div .attr-list>li>label
 {
 	width: 55px;
 	height: 32px;

triple.html

@@ -1096,22 +1096,22 @@ var formation = new Formation(teamsCount,6);
 		<div class="search-box display-none">
 			<div class="attrs-div"><!--属性-->
 				<ul class="attr-list attr-list-1">
-					<li><input type="radio" name="attr-1" class="attr-radio" value="all" id="search-attr-1-any" checked/><label class="attr" data-attr-icon="any" for="search-attr-1-any"><!--任意--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="0" id="search-attr-1-0" /><label class="attr" data-attr-icon="0" for="search-attr-1-0"><!--火--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="1" id="search-attr-1-1" /><label class="attr" data-attr-icon="1" for="search-attr-1-1"><!--水--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="2" id="search-attr-1-2" /><label class="attr" data-attr-icon="2" for="search-attr-1-2"><!--木--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="3" id="search-attr-1-3" /><label class="attr" data-attr-icon="3" for="search-attr-1-3"><!--光--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="4" id="search-attr-1-4" /><label class="attr" data-attr-icon="4" for="search-attr-1-4"><!--暗--></label></li>
-					<li><input type="radio" name="attr-1" class="attr-radio" value="6" id="search-attr-1-6" /><label class="attr" data-attr-icon="6" for="search-attr-1-6"><!--无主属性--></label></li>
+					<li><input type="radio" name="attr-1" class="attr-radio" value="all" 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="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="radio" name="attr-1" class="attr-radio" 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="radio" name="attr-1" class="attr-radio" 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="radio" name="attr-1" class="attr-radio" 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="radio" name="attr-1" class="attr-radio" 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="radio" name="attr-1" class="attr-radio" 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 attr-list-2">
-					<li><input type="radio" name="attr-2" class="attr-radio" value="all" id="search-attr-2-any" checked/><label class="attr" data-attr-icon="any" for="search-attr-2-any"><!--任意--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="0" id="search-attr-2-0" /><label class="attr" data-attr-icon="0" for="search-attr-2-0"><!--火--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="1" id="search-attr-2-1" /><label class="attr" data-attr-icon="1" for="search-attr-2-1"><!--水--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="2" id="search-attr-2-2" /><label class="attr" data-attr-icon="2" for="search-attr-2-2"><!--木--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="3" id="search-attr-2-3" /><label class="attr" data-attr-icon="3" for="search-attr-2-3"><!--光--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="4" id="search-attr-2-4" /><label class="attr" data-attr-icon="4" for="search-attr-2-4"><!--暗--></label></li>
-					<li><input type="radio" name="attr-2" class="attr-radio" value="-1" id="search-attr-2-none" /><label class="attr" data-attr-icon="-1" for="search-attr-2-none"><!--无--></label></li>
+					<li><input type="radio" name="attr-2" class="attr-radio" value="all" 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="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="radio" name="attr-2" class="attr-radio" 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="radio" name="attr-2" class="attr-radio" 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="radio" name="attr-2" class="attr-radio" 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="radio" name="attr-2" class="attr-radio" 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="radio" name="attr-2" class="attr-radio" value="-1" id="search-attr-2-none" /><label for="search-attr-2-none"><span class="attr" data-attr-icon="-1"></span></label></li><!--无-->
 				</ul>
 				<input type="checkbox" class="config-checkbox-ipt" name="fix-main-color" id="fix-main-color" checked><label class="config-checkbox-lbl fix-main-color-label" for="fix-main-color"><div class="config-checkbox-lbl-cicle"></div></label>
 			</div>