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标签字体的颜色,从而显示出清空按钮