Question

我是CSS的业余爱好者，所以这可能是一个愚蠢的问题，但是为什么这些自定义按钮的图像不起作用？单选按钮本身可以正常工作，但是图像无法加载。

我尝试消除＆符之后的文本字符串，并且图像加载得很好，但是毫不奇怪，当我这样做时，它不再充当单选按钮。 Apache2报告“无法统计”错误，因此这看起来像是服务器端错误。

Relay.cgi：

#! /bin/bash
. /usr/lib/cgi-bin/relay/header.cgi
RunTest=$( $DIR/runtest )
if [[ $RunTest -eq 1 ]]
then
    nohup $DIR/Status.cgi
    exit
fi
cat $DIR/header.html
echo '</HEAD>'

echo '<BODY style="background-color:#00EE66">'
echo '<table>'
echo '<tr><h1><b>Aquarium Equipment Suspend</b></h1></tr>'
echo '<form action="/cgi-bin/relay/Timer.cgi">'
echo '<h2>'
echo '<p><b>'
echo '<tr>'
i=1
while read line
do
    echo '<tr>'
    echo '<th>'$line'</th>'
    echo '<th><input type="radio" name="R'$i'" value="15">'
    echo '<img src="/images/Button.png"></th>'  <=== Removed text for testing.  Image loads.
    echo '<th><input type="radio" name="R'$i'" value="30">'
    echo '<img src="/images/Button.png&text=30 Minutes"></th>'  <=== Radio button works.  Image does not load.
    echo '<th><input type="radio" name="R'$i'" value="60">'
    echo '<img src="Button.png&text=60 Minutes"></th>'
    echo '<th><input type="radio" name="R'$i'" value="120">'
    echo '<img src="Button.png&text=120 Minutes"></th>'
    i=$(( $i + 1 ))
done < $DIR/Relays.fil
echo '<br><input type="submit" value="Submit">'
echo '</b></p>'
echo '</form>'
echo '</h2>'
echo '</table>'
echo '</BODY>'
echo '</HTML>'

header.html：

Content-Type: text/html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE> Aquarium Relay Control </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Leslie Rhorer">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<STYLE>
/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
}

/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 2px solid #f00;
}

Apache2 /错误日志：

[Fri Jun 07 13:28:29.299318 2019] [cgid:error] [pid 21675:tid 1946154032] [client 192.168.1.121:51888] AH01264: script not found or unable to stat: /usr/lib/cgi-bin/relay/Button.png&text=60 Minutes, referer: http://192.168.1.40/cgi-bin/relay/index.cgi

Answer 1

无论页面是从Python脚本还是原始HTML脚本生成，我尝试过的任何方法都不能使脚本使用上述方法工作。我不知道为什么它不起作用。我已经使用完全不同的方法获得了部分解决方案。只有第一行（其中i = 1）可以正常工作，但是显示正确并且整个第一行都可以工作。其他人将需要解释为什么其他行（i> 1）尽管显示正确，却不起作用。通过选择第2-6行中的项目来更新GET值，但它们是与第1行（“ R1”）相关的值，而不是与其他行（“ R2”，R3等）相关的值。我怀疑它与“ for =”和/或“ id =”有关，但是我不知道它们是做什么的，所以我没有办法知道要更改什么。

header.html

<STYLE>
/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
.button15{background-image:url(http://192.168.1.40/images/Button15.png);}
.button30{background-image:url(http://192.168.1.40/images/Button30.png);}
.button45{background-image:url(http://192.168.1.40/images/Button45.png);}
.button60{background-image:url(http://192.168.1.40/images/Button60.png);}
.button90{background-image:url(http://192.168.1.40/images/Button90.png);}
.button120{background-image:url(http://192.168.1.40/images/Button120.png);}

.cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
    -moz-filter: none;
    filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:50px;
    -webkit-transition: all 100ms ease-in;
    -moz-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
    -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
    filter: brightness(1.8) grayscale(1) opacity(.7);
}
...
</STYLE>

relay.cgi

#! /bin/bash
. /usr/lib/cgi-bin/relay/header.cgi
cat $DIR/header.html
echo '</HEAD>'

echo '<BODY style="background-color:#00EE66">'
echo '<form action="/cgi-bin/relay/Timer.cgi">'
echo '<table>'
echo '<tr><th></th><th></th><th></th>'
echo '<th>Aquarium Equipment Suspend</th><th></th><th></th><th></th></tr>'
echo '<tr></tr>'
i=1
while read line
do
    echo '<tr>'
    echo '<th>'$line'</th>'
    echo '<th><div class="cc-selector"><input id="button15-'$i'" type="radio" name="R'$i'" value="15" />'
    echo '<label class="drinkcard-cc button15" for="button15-'$i'"></label></div></th>'
    echo '<th><div class="cc-selector"><input id="button30-'$i'" type="radio"     name="R'$i'" value="30" />'
    echo '<label class="drinkcard-cc button30" for="button30-'$i'"></label></div></th>'
    echo '<th><div class="cc-selector"><input id="button45-'$i'" type="radio"     name="R'$i'" value="45" />'
    echo '<label class="drinkcard-cc button45" for="button45-"></label></div></th>'
    echo '<th><div class="cc-selector"><input id="button60-'$i'" type="radio" name="R'$i'" value="60" />'
    echo '<label class="drinkcard-cc button60" for="button60-'$i'"></label></div></th>'
    echo '<th><div class="cc-selector"><input id="button90-'$i'" type="radio" name="R'$i'" value="90" />'
    echo '<label class="drinkcard-cc button90" for="button90-'$i'"></label></div></th>'
    echo '<th><div class="cc-selector"><input id="button120-'$i'" type="radio" name="R'$i'" value="120" />'
    echo '<label class="drinkcard-cc button120" for="button120-'$i'"></label></div></th>'
    echo</tr>
    i=$(( $i + 1 ))
done < $DIR/Relays.fil
...
</table>
echo '<input type="submit" value="Submit">'
...

Answer 2

好的，关于我糟糕的编码已经足够了。为了完整起见，以下是删除cgi标头后的脚本输出。它验证没有错误。请注意“ id =“和” for =“的值，这是原始脚本的问题。

<!DOCTYPE HTML>
<HTML lang="en">
<HEAD>
<TITLE> Aquarium Relay Control </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="Leslie Rhorer">
<META NAME="Keywords" CONTENT="">    
<META NAME="Description" CONTENT="Aquarium Relay">
<META charset="utf-8"/>
<STYLE>
/* HIDE RADIO */
[type=radio] {
  position: absolute;
  opacity: 0; 
  width: 0;
  height: 0;
}

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
  -moz-appearance:none;
   appearance:none;
}
.button15{background-image:url(http://192.168.1.40/images/button15.png);}
.button30{background-image:url(http://192.168.1.40/images/button30.png);}
.button45{background-image:url(http://192.168.1.40/images/button45.png);}
.button60{background-image:url(http://192.168.1.40/images/button60.png);}
.button90{background-image:url(http://192.168.1.40/images/button90.png);}
.button120{background-image:url(http://192.168.1.40/images/button120.png);}

.cc-selector input:active +.button-cc{opacity: .9;}
.cc-selector input:checked +.button-cc{
    -webkit-filter: none;   
  -moz-filter: none;   
   filter: none;   
}
.button-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:block; 
    margin-left: auto; 
    margin-right: auto;

    width:100px;height:50px;
    -webkit-transition: all 100ms ease-in;
  -moz-transition: all 100ms ease-in;
   transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
  -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
   filter: brightness(1.8) grayscale(1) opacity(.7);
}

TABLE, TH, TD {
    border: 1px solid black;
}
TABLE {
    width: 90%;
}
TH {
    height: 50px;
}

div.Countdown {  
    position: fixed;
    top: 26px;
    left: 480px;
    width: 300px;
    font: bold 24px Arial;
    color: black;
}
h1 {text-align: center;}
.tab { text-indent:30% }
</STYLE>
</HEAD>
<BODY style="background-color:#00EE66">
<form action="/cgi-bin/relay/timer.cgi">
<h1>Aquarium Equipment Suspend</h1>
<p class="tab"><input type="submit" value="Submit"></p>
<table><tr>
<th>Sump Equipment</th>
<th><div class="cc-selector"><input id="button15-1" type="radio" name="R1" value="15" />
<label class="button-cc button15" for="button15-1"></label></div></th>
<th><div class="cc-selector"><input id="button30-1" type="radio" name="R1" value="30" />
<label class="button-cc button30" for="button30-1"></label></div></th>
<th><div class="cc-selector"><input id="button45-1" type="radio" name="R1" value="45" />
<label class="button-cc button45" for="button45-1"></label></div></th>
<th><div class="cc-selector"><input id="button60-1" type="radio" name="R1" value="60" />
<label class="button-cc button60" for="button60-1"></label></div></th>
<th><div class="cc-selector"><input id="button90-1" type="radio" name="R1" value="90" />
<label class="button-cc button90" for="button90-1"></label></div></th>
<th><div class="cc-selector"><input id="button120-1" type="radio" name="R1" value="120" />   
<label class="button-cc button120" for="button120-1"></label></div></th></tr>
<tr>
<th>Protein Skimmer</th>
<th><div class="cc-selector"><input id="button15-2" type="radio" name="R2" value="15" />
<label class="button-cc button15" for="button15-2"></label></div></th>
<th><div class="cc-selector"><input id="button30-2" type="radio" name="R2" value="30" />
<label class="button-cc button30" for="button30-2"></label></div></th>
<th><div class="cc-selector"><input id="button45-2" type="radio" name="R2" value="45" />
<label class="button-cc button45" for="button45-2"></label></div></th>
<th><div class="cc-selector"><input id="button60-2" type="radio" name="R2" value="60" />
<label class="button-cc button60" for="button60-2"></label></div></th>
<th><div class="cc-selector"><input id="button90-2" type="radio" name="R2" value="90" />
<label class="button-cc button90" for="button90-2"></label></div></th>
<th><div class="cc-selector"><input id="button120-2" type="radio" name="R2" value="120" />   
<label class="button-cc button120" for="button120-2"></label></div></th></tr>  
<tr>   
<th>Air Pump</th>    
<th><div class="cc-selector"><input id="button15-3" type="radio" name="R3" value="15" />
<label class="button-cc button15" for="button15-3"></label></div></th>
<th><div class="cc-selector"><input id="button30-3" type="radio" name="R3" value="30" />
<label class="button-cc button30" for="button30-3"></label></div></th>
<th><div class="cc-selector"><input id="button45-3" type="radio" name="R3" value="45" />
<label class="button-cc button45" for="button45-3"></label></div></th>
<th><div class="cc-selector"><input id="button60-3" type="radio" name="R3" value="60" />
<label class="button-cc button60" for="button60-3"></label></div></th>
<th><div class="cc-selector"><input id="button90-3" type="radio" name="R3" value="90" />
<label class="button-cc button90" for="button90-3"></label></div></th>
<th><div class="cc-selector"><input id="button120-3" type="radio" name="R3" value="120" />
<label class="button-cc button120" for="button120-3"></label></div></th></tr>
<tr>
<th>Power Filter</th>
<th><div class="cc-selector"><input id="button15-4" type="radio" name="R4" value="15" />
<label class="button-cc button15" for="button15-4"></label></div></th>
<th><div class="cc-selector"><input id="button30-4" type="radio" name="R4" value="30" />
<label class="button-cc button30" for="button30-4"></label></div></th>
<th><div class="cc-selector"><input id="button45-4" type="radio" name="R4" value="45" />
<label class="button-cc button45" for="button45-4"></label></div></th>
<th><div class="cc-selector"><input id="button60-4" type="radio" name="R4" value="60" />
<label class="button-cc button60" for="button60-4"></label></div></th>
<th><div class="cc-selector"><input id="button90-4" type="radio" name="R4" value="90" />
<label class="button-cc button90" for="button90-4"></label></div></th>
<th><div class="cc-selector"><input id="button120-4" type="radio" name="R4" value="120" />   
<label class="button-cc button120" for="button120-4"></label></div></th></tr>  
<tr>
<th>Power Heads Left</th>
<th><div class="cc-selector"><input id="button15-5" type="radio" name="R5" value="15" />
<label class="button-cc button15" for="button15-5"></label></div></th>
<th><div class="cc-selector"><input id="button30-5" type="radio" name="R5" value="30" />
<label class="button-cc button30" for="button30-5"></label></div></th>
<th><div class="cc-selector"><input id="button45-5" type="radio" name="R5" value="45" />
<label class="button-cc button45" for="button45-5"></label></div></th>
<th><div class="cc-selector"><input id="button60-5" type="radio" name="R5" value="60" />
<label class="button-cc button60" for="button60-5"></label></div></th>
<th><div class="cc-selector"><input id="button90-5" type="radio" name="R5" value="90" />
<label class="button-cc button90" for="button90-5"></label></div></th>
<th><div class="cc-selector"><input id="button120-5" type="radio" name="R5" value="120" />
<label class="button-cc button120" for="button120-5"></label></div></th></tr>
<tr>
<th>Power Heads Right</th>
<th><div class="cc-selector"><input id="button15-6" type="radio" name="R6" value="15" />
<label class="button-cc button15" for="button15-6"></label></div></th>
<th><div class="cc-selector"><input id="button30-6" type="radio" name="R6" value="30" />
<label class="button-cc button30" for="button30-6"></label></div></th>
<th><div class="cc-selector"><input id="button45-6" type="radio" name="R6" value="45" />
<label class="button-cc button45" for="button45-6"></label></div></th>
<th><div class="cc-selector"><input id="button60-6" type="radio" name="R6" value="60" />
<label class="button-cc button60" for="button60-6"></label></div></th>
<th><div class="cc-selector"><input id="button90-6" type="radio" name="R6" value="90" />
<label class="button-cc button90" for="button90-6"></label></div></th>
<th><div class="cc-selector"><input id="button120-6" type="radio" name="R6" value="120" />   
<label class="button-cc button120" for="button120-6"></label></div></th></tr>  
<tr>
<th>Power Heads Center</th>
<th><div class="cc-selector"><input id="button15-7" type="radio" name="R7" value="15" />
<label class="button-cc button15" for="button15-7"></label></div></th>
<th><div class="cc-selector"><input id="button30-7" type="radio" name="R7" value="30" />
<label class="button-cc button30" for="button30-7"></label></div></th>
<th><div class="cc-selector"><input id="button45-7" type="radio" name="R7" value="45" />
<label class="button-cc button45" for="button45-7"></label></div></th>
<th><div class="cc-selector"><input id="button60-7" type="radio" name="R7" value="60" />
<label class="button-cc button60" for="button60-7"></label></div></th>
<th><div class="cc-selector"><input id="button90-7" type="radio" name="R7" value="90" />
<label class="button-cc button90" for="button90-7"></label></div></th>
<th><div class="cc-selector"><input id="button120-7" type="radio" name="R7" value="120" />   
<label class="button-cc button120" for="button120-7"></label></div></th></tr>
<tr>
<th>Spare</th>
<th><div class="cc-selector"><input id="button15-8" type="radio" name="R8" value="15" />
<label class="button-cc button15" for="button15-8"></label></div></th>
<th><div class="cc-selector"><input id="button30-8" type="radio" name="R8" value="30" />
<label class="button-cc button30" for="button30-8"></label></div></th>
<th><div class="cc-selector"><input id="button45-8" type="radio" name="R8" value="45" />
<label class="button-cc button45" for="button45-8"></label></div></th>
<th><div class="cc-selector"><input id="button60-8" type="radio" name="R8" value="60" />
<label class="button-cc button60" for="button60-8"></label></div></th>
<th><div class="cc-selector"><input id="button90-8" type="radio" name="R8" value="90" />
<label class="button-cc button90" for="button90-8"></label></div></th>
<th><div class="cc-selector"><input id="button120-8" type="radio" name="R8" value="120" />
<label class="button-cc button120" for="button120-8"></label></div></th></tr>
</table>
</form>
</BODY>
</HTML>

自定义单选按钮：为什么不显示图像？

2 个答案: