bootstrap實現input輸入框內部的右側清空按鈕
阿新 • • 發佈:2020-07-22
當滑鼠懸浮在input上時顯示出X
<div class="has-feedback"> <input type="text" class="form-control input-content" id="codeType" required="required" name="code" placeholder="請輸入內容"> <a class="glyphicon glyphicon-remove btn form-control-feedback input-clear-a" style="pointer-events: auto;" onclick="$('#codeType').val('')"></a></div>
然後通過css去控制他的顏色,因為我們用的bootstrap字型圖示也就是color
.input-clear-a {
color: white;
}
.input-content:hover + .input-clear-a {
color: #d4d4d4;
}
初始顏色設定為白色,與input背景顏色相同。
然後因為input輸入框與a標籤是同級(兄弟標籤) 所以使用 :hover+. 控制懸浮時a標籤字型的顏色,從而顯示出清空按鈕