【发布时间】：2017-04-03 02:03:28
【问题描述】：
我正在制作简单的反馈表，其中包含 3 个字段名称、评级（差、一般、好）和反馈评论。
在我的表单中，我希望用户一次选择一个评分并提交带有所选评分和反馈 cmets 的表单。
我为每个评级创建了<div> 元素，并将它们设置为无线电类型。
我不想在表单上显示单选按钮，但我希望我的 Div 表现得像单选按钮。
还有如何修复Divs的边框？
我附上截图。
第一个，我希望它如何显示，第二个是我当前的代码在 UI 上的显示方式。
下面是我的表单代码和 CSS
<div id="modal_wrapper">
<div id="modal_window">
<div style="text-align: right;"><a id="modal_close" href="#">close <b>X</b></a></div>
<p><Strong>We'd love your feedback.</Strong><br></p>
<p>Your feedback will help us improve your experience. To protect your privacy, please do not enter personal or account information.</p>
<form id="modal_feedback" method="POST" action="#" accept-charset="UTF-8">
Your Name :<br>
<input type="text" name="name" value=""><span></span><br>
<div class="feedbackCl" >
<input id="overall_0" name="overall" type="radio" value="1" tabindex="0" aria-describedby="o1-l">
<label for="overall_0" class="labelClass">— —</label>
<span class="screen_reader" id="o1-l">Poor</span>
</div>
<div class="feedbackCl">
<input id="overall_1" name="overall" type="radio" value="2" tabindex="0" aria-describedby="o2-l">
<label for="overall_1" class="labelClass">—</label>
<span class="screen_reader" id="o2-l">Fair</span>
</div>
<div class="feedbackCl">
<input id="overall_2" name="overall" type="radio" value="3" tabindex="0" aria-describedby="o3-l">
<label for="overall_2" class="labelClass">+ —</label>
<span class="screen_reader" id="o3-l">Good</span>
</div>
<br>
<span><br></span><br>
<textarea style="overflow-x: hidden;" id="gBann" name="message" maxlength="1000" rows="4" cols="85" placeholder="How can we improve our site? Please share your suggestions." onKeyUp="toCount('gBann','uBann','{CHAR} characters left',1000);" >
</textarea><br>
<span id="uBann" class="minitext" style="text-align: right;">1000 characters left</span><br>
<input type="submit" name="feedbackForm" value="Submit">
</form>
</div>
</div>
CSS 代码
.feedbackCl {
float: left;
box-sizing: border-box;
padding-top: 5px;
width: 9%;
text-align: center;
height: 40px;
}
input[type="radio" i] {
-webkit-appearance: radio;
box-sizing: border-box;
}
.labelClass{
margin-right: 0 !important;
height: 28px;
background-color: #fff !important;
color: #0511ac;
box-sizing: border-box;
}
【问题讨论】：
-
"我不想在表单上显示单选按钮，但我希望我的 Div 表现得像单选按钮"。你这是什么意思？单选按钮的“行为”的一部分是用户可以选择一个且只有一个选项。如果不显示它，就不可能让它像单选按钮一样“表现”。如果我理解正确，您需要在按钮上使用
display: none，并使用 JavaScript 将 DIV 连接到等效的单选按钮选项。 -
再说一次，如果要隐藏单选按钮，为什么还要它们？如果您不想要单选按钮，只需使用图像点击事件来记录评分。
-
你想获得一个像单选按钮这样的 div 显示的帮助 css 吗？ （1个div同时出现，其他div会消失）
标签： javascript jquery html css forms