1. 程式人生 > 實用技巧 >bootstrap實現input輸入框內部的右側清空按鈕

bootstrap實現input輸入框內部的右側清空按鈕

當滑鼠懸浮在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標籤字型的顏色,從而顯示出清空按鈕