CSS样式导致星级评分表单提交按钮无法显示，如何修复？

你的提交按钮之所以消失，核心原因是CSS选择器错误地把提交按钮也归到了隐藏的input范围内，再加上一段无效的CSS代码干扰了布局。下面是具体的修复步骤和完整代码：

问题分析 #

你写的.rate:not(:checked) > input这个选择器会选中.rate容器下的所有<input>元素——包括你的提交按钮（<input type="submit">），而这个规则里的position:absolute; top:-9999px;直接把按钮移出了可视区域，导致它完全看不见。另外，你CSS末尾单独的width:1em;是无效语法，会影响整个CSS的解析逻辑。

修复方案 #

1. 精准定位需要隐藏的input #

把隐藏input的规则限定为仅radio类型，这样就不会影响提交按钮：

.rate:not(:checked) > input[type="radio"] { position:absolute; top:-9999px; }

2. 移除无效的CSS代码 #

删掉末尾单独的width:1em;行，避免CSS解析出错。

3. 优化提交按钮的布局（可选） #

为了让按钮和星级评分区域排版更协调，可以给提交按钮添加一些基础样式，比如清除浮动、设置间距等。

修改后的完整代码 #

CSS代码 #

.rate { 
  float: left; 
  height: 46px; 
  padding: 0 10px; 
}
/* 只隐藏radio类型的input，不影响submit */
.rate:not(:checked) > input[type="radio"] { 
  position:absolute; 
  top:-9999px; 
}
.rate:not(:checked) > label { 
  float:right; 
  overflow:hidden; 
  white-space:nowrap; 
  cursor:pointer; 
  font-size:30px; 
  color:#ccc; 
}
.rate:not(:checked) > label:before { 
  content: '★ '; 
}
.rate > input[type="radio"]:checked ~ label { 
  color: #ffc700; 
}
.rate:not(:checked) > label:hover, .rate:not(:checked) > label:hover ~ label { 
  color: #deb217; 
}
.rate > input[type="radio"]:checked + label:hover, 
.rate > input[type="radio"]:checked + label:hover ~ label, 
.rate > input[type="radio"]:checked ~ label:hover, 
.rate > input[type="radio"]:checked ~ label:hover ~ label, 
.rate > label:hover ~ input[type="radio"]:checked ~ label { 
  color: #c59b08; 
}
/* 给提交按钮添加基础样式，优化排版 */
#sub {
  float: left;
  margin-left: 10px;
  margin-top: 8px;
  padding: 5px 15px;
  cursor: pointer;
}

HTML代码 #

<form action="/r" method="POST" class="rate">
  <input type="radio" id="star5" name="rate" value="5" />
  <label for="star5" title="5">5 stars</label>
  <input type="radio" id="star4" name="rate" value="4" />
  <label for="star4" title="4">4 stars</label>
  <input type="radio" id="star3" name="rate" value="3" />
  <label for="star3" title="3">3 stars</label>
  <input type="radio" id="star2" name="rate" value="2" />
  <label for="star2" title="2">2 stars</label>
  <input type="radio" id="star1" name="rate" value="1" />
  <label for="star1" title="1">1 star</label>
  <input type="submit" id="sub" value="Submit">
</form>

这样修改后，提交按钮就会正常显示，并且可以正常点击提交表单了。如果需要更适配响应式布局，还可以给.rate容器添加display: flex来替代浮动，让排版更灵活。

内容的提问来源于stack exchange，提问作者rako