html - 自定义单选按钮:为什么不显示图像?
问题描述
我是 CSS 的业余爱好者,所以这可能是一个愚蠢的问题,但为什么这些自定义按钮的图像不起作用?单选按钮本身可以正常工作,但无法加载图像。
我尝试消除&符号后的文本字符串,并且图像加载得很好,但毫不奇怪,当我这样做时它不再用作单选按钮。Apache2 报告“无法统计”错误,因此这看起来像是服务器端错误。
继电器.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
解决方案
好的,关于我糟糕的编码就足够了。为了完整起见,这里是删除 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>
推荐阅读
- java - Android Studio 中的文件路径
- pyqt5 - 使用搜索栏在列表中查找项目
- google-app-maker - 如何在谷歌应用程序制造商的自动保存模式下实现保存记录的回调功能?
- spring-boot - 是否可以使用 Keycloak 对新用户触发自定义操作?
- sccm - WQL/SCCM - 正确比较版本号(小于...)
- javascript - 如何使用 webpack-4 解析 sass 文件中的背景图像 URL?
- django - 将标头添加到 Django 重定向
- mysql - 计算一个月内每一天的id
- python - 特定用户的 Google 云端硬盘导出(Google 保险柜)
- jquery - 如何在加载时隐藏div?