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標簽字體的顏色,從而顯示出清空按鈕