我簡單的反饋表上的工作,我有3個字段名稱,等級(差,一般,好)和反饋意見。如何設置單選按鈕隱藏在div
在我的形式我想用戶選擇一個等級的時間和與選定的評級&反饋意見提交表單。
我已經爲每個評級創建了<div>
元素,並將它們設置爲無線電類型。
我不想在窗體上顯示單選按鈕,但我希望我的Div表現爲單選按鈕。
而且如何解決的div的邊界?
我附上截圖。
首先一個,我多麼希望它出現,第二個是我當前的代碼是如何出現在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;
}
「*我不希望顯示在表單上的單選按鈕,但我希望我的事業部表現爲單選按鈕*」。這是什麼意思?部分單選按鈕的「行爲」是用戶可以選擇一個且僅有一個選項。通過不顯示它,它不可能像「單選按鈕」那樣「表現」。如果我理解正確,您需要在按鈕上使用'display:none',並使用JavaScript將DIV連接到等效的單選按鈕選項。 –
同樣,如果您要隱藏它們,爲什麼還要單選按鈕?如果您不想單選按鈕,只需使用圖像點擊事件來記錄評分。 – Bindrid
你想得到一個幫助CSS div顯示像單選按鈕? (1 div同時出現,其他div將消失) – Anph