html - 输入旁边的自定义按钮无法使用 BS3 正确更改边框颜色

Question

我在输入旁边有一个自定义按钮，它没有按预期运行。基本上，当我使用 rgba 时，它会创建一个带有较暗提示的重叠边框。它添加的阴影似乎出现在最新版本的 BS 而不是 3.0.0。

HTML

<div class="row">
    <div class="col-lg-12 newsletter">
        <form method="post" action='/' class="form" id="newsletter-form">
            <div class="form-group" id="newsletter-form-group">
                <div class="controls">
                    <div class="input-group">
                        <input type="text" class="form-control newsletter-input" name="testInput" placeholder="Your email address here.." />    
                        <span class="input-group-btn">
                            <button class="btn btn-default newsletter-btn" type="submit">Sign up</button>
                        </span>
                    </div>
                </div>
                <label class="control-label newsletter-status" for="testInput"></label>
            </div>
        </form>
    </div>
</div>

CSS

/* 作为外部资源包含的最新编译和缩小的 CSS*/

 body {
    margin: 10px;
    background-color:#404040;
}
.btn:focus, .btn:active, .btn.active {
    outline: 0!important;
}
.newsletter-btn, .newsletter-btn:focus, .newsletter-btn:active, .newsletter-btn.active {
    color:#fff;
    background-color: rgba(52, 152, 219, 1.0) !important;
    border: 1px solid rgba(52, 152, 219, 1.0) !important;
    font-weight:500;
    border-radius:0!important;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}
.newsletter-btn:hover {
    background-color: rgba(52, 152, 219, 0.5) !important;
    border: 1px solid rgba(52, 152, 219, 0.5) !important;
    color:#fff!important;
    box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
}
.newsletter input {
    box-shadow:none!important;
    border-color:#fff!important;
    background-color: #fff;
    color:#fff;
    border-radius:0!important;
}

演示:https://jsfiddle.net/DTcHh/7138/

Answer 1

要修复不同的边框颜色，请在悬停时将边框颜色设置为透明——您正在重叠两个不透明度为 0.5 的元素，这使边框看起来更亮。

.newsletter-btn:hover {
    background-color: rgba(52, 152, 219, 0.5) !important;
    border: 1px solid transparent !important;
    color:#fff!important;
    box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
}

要修复有趣的增长问题，请设置按钮的 z-index:

.newsletter-btn{
    z-index:999;
}

参见 this functioning fiddle