出于未知原因，每当我在其中添加内部 CSS 以将星形图标添加到“评论表单”时，我网站上的事件 SSL 在 1 个指定页面上变得不活动。当我删除该样式部分时，SSL 再次备份。 我真的不知道如何在我的表单中添加一个简单的星形图标来禁用 SSL？有人有任何线索或技巧吗？
请参阅下面的视觉示例和我的网站评论表单的脚本:
Visual example of the form, with and without stars / active SSL
<table>
<tr>
<td>
<form action="process-review" method="post">
Overall score:
<br><span class="starRating1">
<input id="rating5A" type="radio" name="rating1" value="5" required>
<label for="rating5A">5</label>
<input id="rating4A" type="radio" name="rating1" value="4">
<label for="rating4A">4</label>
<input id="rating3A" type="radio" name="rating1" value="3">
<label for="rating3A">3</label>
<input id="rating2A" type="radio" name="rating1" value="2">
<label for="rating2A">2</label>
<input id="rating1A" type="radio" name="rating1" value="1">
<label for="rating1A">1</label>
</span>
<br>
<textarea style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" name="comment1" rows="5" cols="48" maxlength="10000"></textarea>
<br>
<br> Graphics:
<br><span class="starRating2">
<input id="rating5B" type="radio" name="rating2" value="5" required>
<label for="rating5B">5</label>
<input id="rating4B" type="radio" name="rating2" value="4">
<label for="rating4B">4</label>
<input id="rating3B" type="radio" name="rating2" value="3">
<label for="rating3B">3</label>
<input id="rating2B" type="radio" name="rating2" value="2">
<label for="rating2B">2</label>
<input id="rating1B" type="radio" name="rating2" value="1">
<label for="rating1B">1</label>
</span>
<br>
<textarea style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" name="comment2" rows="2" cols="48" maxlength="10000"></textarea>
<br>
<br> Sound:
<br><span class="starRating3">
<input id="rating5C" type="radio" name="rating3" value="5" required>
<label for="rating5C">5</label>
<input id="rating4C" type="radio" name="rating3" value="4">
<label for="rating4C">4</label>
<input id="rating3C" type="radio" name="rating3" value="3">
<label for="rating3C">3</label>
<input id="rating2C" type="radio" name="rating3" value="2">
<label for="rating2C">2</label>
<input id="rating1C" type="radio" name="rating3" value="1">
<label for="rating1C">1</label>
</span>
<br>
<textarea style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" name="comment3" rows="2" cols="48" maxlength="10000"></textarea>
<br>
<br> Gameplay:
<br><span class="starRating4">
<input id="rating5D" type="radio" name="rating4" value="5" required>
<label for="rating5D">5</label>
<input id="rating4D" type="radio" name="rating4" value="4">
<label for="rating4D">4</label>
<input id="rating3D" type="radio" name="rating4" value="3">
<label for="rating3D">3</label>
<input id="rating2D" type="radio" name="rating4" value="2">
<label for="rating2D">2</label>
<input id="rating1D" type="radio" name="rating4" value="1">
<label for="rating1D">1</label>
</span>
<br>
<textarea style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" name="comment4" rows="2" cols="48" maxlength="10000"></textarea>
<br>
<br> Story:
<br><span class="starRating5">
<input id="rating5E" type="radio" name="rating5" value="5" required>
<label for="rating5E">5</label>
<input id="rating4E" type="radio" name="rating5" value="4">
<label for="rating4E">4</label>
<input id="rating3E" type="radio" name="rating5" value="3">
<label for="rating3E">3</label>
<input id="rating2E" type="radio" name="rating5" value="2">
<label for="rating2E">2</label>
<input id="rating1E" type="radio" name="rating5" value="1">
<label for="rating1E">1</label>
</span>
<br>
<textarea style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" name="comment5" rows="2" cols="48" maxlength="10000"></textarea>
<br>
<br> User Interface:
<br><span class="starRating6">
<input id="rating5F" type="radio" name="rating6" value="5" required>
<label for="rating5F">5</label>
<input id="rating4F" type="radio" name="rating6" value="4">
<label for="rating4F">4</label>
<input id="rating3F" type="radio" name="rating6" value="3">
<label for="rating3F">3</label>
<input id="rating2F" type="radio" name="rating6" value="2">
<label for="rating2F">2</label>
<input id="rating1F" type="radio" name="rating6" value="1">
<label for="rating1F">1</label>
</span>
<br>
<textarea style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" name="comment6" rows="2" cols="48" maxlength="10000"></textarea>
<br>
<br>
<br> Name* (will be published with your review):
<br>
<input style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" type="text" name="name1" size="50" maxlength="50" required/>
<br>
<br> E-mail (hidden with your review):
<br>
<input style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" type="text" name="email1" size="50" maxlength="50" />
<br>
<br> Anti-bot verification*:
<div class="check">
<label>4 x 3 =</label>
<input min="0" max="999999" style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" type="number" name="not_robot1" required="required">
</div>
<br>
<input style="background-color: #3382F8; color: white; font-size: 17px; border: 2px solid #000B68;" type="submit" name="submit" value="Send" />
</form>
</td>
</tr>
</table>
<head>
<style>
.starRating1:not(old) {
display: inline-block;
width: 7.5em;
height: 1.5em;
overflow: hidden;
vertical-align: bottom;
}
.starRating1:not(old) > input {
margin-right: -100%;
opacity: 0;
}
.starRating1:not(old) > label {
display: block;
float: right;
position: relative;
background: url('http://empireofthewicked.com/images/star-off.png');
background-size: contain;
}
.starRating1:not(old) > label:before {
content: '';
display: block;
width: 1.5em;
height: 1.5em;
background: url('http://empireofthewicked.com/images/star-on.png');
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}
.starRating1:not(old) > label:hover:before,
.starRating1:not(old) > label:hover ~ label:before,
.starRating1:not(:hover) >:checked ~ label:before {
opacity: 1;
}
.starRating2:not(old) {
display: inline-block;
width: 7.5em;
height: 1.5em;
overflow: hidden;
vertical-align: bottom;
}
.starRating2:not(old) > input {
margin-right: -100%;
opacity: 0;
}
.starRating2:not(old) > label {
display: block;
float: right;
position: relative;
background: url('http://empireofthewicked.com/images/star-off.png');
background-size: contain;
}
.starRating2:not(old) > label:before {
content: '';
display: block;
width: 1.5em;
height: 1.5em;
background: url('http://empireofthewicked.com/images/star-on.png');
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}
.starRating2:not(old) > label:hover:before,
.starRating2:not(old) > label:hover ~ label:before,
.starRating2:not(:hover) >:checked ~ label:before {
opacity: 1;
}
.starRating3:not(old) {
display: inline-block;
width: 7.5em;
height: 1.5em;
overflow: hidden;
vertical-align: bottom;
}
.starRating3:not(old) > input {
margin-right: -100%;
opacity: 0;
}
.starRating3:not(old) > label {
display: block;
float: right;
position: relative;
background: url('http://empireofthewicked.com/images/star-off.png');
background-size: contain;
}
.starRating3:not(old) > label:before {
content: '';
display: block;
width: 1.5em;
height: 1.5em;
background: url('http://empireofthewicked.com/images/star-on.png');
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}
.starRating3:not(old) > label:hover:before,
.starRating3:not(old) > label:hover ~ label:before,
.starRating3:not(:hover) >:checked ~ label:before {
opacity: 1;
}
.starRating4:not(old) {
display: inline-block;
width: 7.5em;
height: 1.5em;
overflow: hidden;
vertical-align: bottom;
}
.starRating4:not(old) > input {
margin-right: -100%;
opacity: 0;
}
.starRating4:not(old) > label {
display: block;
float: right;
position: relative;
background: url('http://empireofthewicked.com/images/star-off.png');
background-size: contain;
}
.starRating4:not(old) > label:before {
content: '';
display: block;
width: 1.5em;
height: 1.5em;
background: url('http://empireofthewicked.com/images/star-on.png');
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}
.starRating4:not(old) > label:hover:before,
.starRating4:not(old) > label:hover ~ label:before,
.starRating4:not(:hover) >:checked ~ label:before {
opacity: 1;
}
.starRating5:not(old) {
display: inline-block;
width: 7.5em;
height: 1.5em;
overflow: hidden;
vertical-align: bottom;
}
.starRating5:not(old) > input {
margin-right: -100%;
opacity: 0;
}
.starRating5:not(old) > label {
display: block;
float: right;
position: relative;
background: url('http://empireofthewicked.com/images/star-off.png');
background-size: contain;
}
.starRating5:not(old) > label:before {
content: '';
display: block;
width: 1.5em;
height: 1.5em;
background: url('http://empireofthewicked.com/images/star-on.png');
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}
.starRating5:not(old) > label:hover:before,
.starRating5:not(old) > label:hover ~ label:before,
.starRating5:not(:hover) >:checked ~ label:before {
opacity: 1;
}
.starRating6:not(old) {
display: inline-block;
width: 7.5em;
height: 1.5em;
overflow: hidden;
vertical-align: bottom;
}
.starRating6:not(old) > input {
margin-right: -100%;
opacity: 0;
}
.starRating6:not(old) > label {
display: block;
float: right;
position: relative;
background: url('http://empireofthewicked.com/images/star-off.png');
background-size: contain;
}
.starRating6:not(old) > label:before {
content: '';
display: block;
width: 1.5em;
height: 1.5em;
background: url('http://empireofthewicked.com/images/star-on.png');
background-size: contain;
opacity: 0;
transition: opacity 0.2s linear;
}
.starRating6:not(old) > label:hover:before,
.starRating6:not(old) > label:hover ~ label:before,
.starRating6:not(:hover) >:checked ~ label:before {
opacity: 1;
}
</style>
</head>
最佳答案
问题是这样的:
background: url('http://empireofthewicked.com/images/star-off.png');
为了安全连接，“http”部分应该是“https”。提供的每个图像都必须来自“https”连接。因此，如果您从“http”外部加载它，它将被标记为不安全。您可以通过从您自己的服务器加载它或使用“https”版本(如果可用)来解决它。
关于ssl - 为什么在我的表单中添加一个简单的星形图标会禁用 SSL？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57468220/